Slide to Unlock

An iOS 26-inspired liquid glass slide-to-unlock switch with real-time SVG refraction effects.

Browser Compatibility

MDN Source

Chrome...

Full

Edge...

Full

Safari...

Full

Firefox...

Partial

Opera...

Full

Compatibility Note for Liquid Glass Refraction:

Firefox supports backdrop-filter but currently lacks support for referring to SVG filters via url(#filterId). This results in the surface appearing as a simple semi-transparent blur without the refractive liquid effect.

Open in

"use client";
 
import { SlideToUnlock } from "@/components/jyotirmoydas/slide-to-unlock";
 
export function SlideToUnlockDemo1() {
  return <SlideToUnlock />;
}

Installation

bunx --bun shadcn@latest add @jyotirmoydas/slide-to-unlock

Usage

import { SlideToUnlock } from "@/components/jyotirmoydas/slide-to-unlock";

<SlideToUnlock onUnlock={() => console.log("Unlocked!")} />

API Reference

Callbacks

Event handlers triggered during state transitions.

Prop	Type	Description
`onUnlock`	`() => void`	Callback triggered when the slider reaches ON position.
`onLock`	`() => void`	Callback triggered when the slider reaches OFF position.

Behavior

Control the switch's initial state and feedback mechanisms.

Prop	Type	Default	Description
`defaultChecked`	`boolean`	`false`	Initial state of the switch.
`soundEnabled`	`boolean`	`true`	Whether to play the unlock sound effect.
`toastEnabled`	`boolean`	`true`	Whether to show a toast notification on unlock.
`toastMessage`	`string`	`"Unlocked"`	Custom message to display in the unlock toast.
`disabled`	`boolean`	`false`	Whether the switch is disabled.

Appearance

Customize the visual appearance of the switch.

Prop	Type	Default	Description
`className`	`string`		Additional CSS classes to apply.
`thumbColor`	`string`	`"rgba(255, 255, 255, 1)"`	Color of the thumb/handle.
`trackColorOff`	`string`	`"#94949F77"`	Background color of the track when OFF.
`trackColorOn`	`string`	`"#3BBF4EEE"`	Background color of the track when ON.

Optical Parameters

Fine-tune the liquid glass refraction effect. These parameters control the SVG filter that creates the glass-like appearance.

Prop	Type	Default	Description
`blur`	`number`	`0.2`	Blur level for the glass refraction effect.
`specularOpacity`	`number`	`0.5`	Opacity of the specular highlight.
`specularSaturation`	`number`	`6`	Saturation multiplier for the specular highlight.
`refractionLevel`	`number`	`1`	Base refraction level (magnification intensity).

Examples

Default

The default configuration with unlock sound and toast notification enabled.

Open in

"use client";
 
import { SlideToUnlock } from "@/components/jyotirmoydas/slide-to-unlock";
 
export function SlideToUnlockDemo1() {
  return <SlideToUnlock />;
}

Custom Colors

Customize the thumb and track colors to match your design system.

Open in

"use client";
 
import { SlideToUnlock } from "@/components/jyotirmoydas/slide-to-unlock";
 
export function SlideToUnlockDemo2() {
  return (
    <SlideToUnlock
      thumbColor="rgba(59, 130, 246, 0.95)"
      trackColorOff="#e7e5e4"
      trackColorOn="#173462"
      toastMessage="Color Changed"
    />
  );
}

Custom Optical Parameters

Fine-tune the glass refraction effect by adjusting the optical parameters. Try different values to achieve your desired look.

Open in

"use client";
 
import { SlideToUnlock } from "@/components/jyotirmoydas/slide-to-unlock";
 
export function SlideToUnlockDemo3() {
  // Customize the optical parameters to fine-tune the glass effect
  // Try adjusting these values to see how they affect the refraction!
  return (
    <SlideToUnlock
      blur={0.3}
      specularOpacity={0.7}
      specularSaturation={8}
      refractionLevel={1.2}
      toastEnabled={false}
      soundEnabled={false}
    />
  );
}

Disabled State

A disabled switch that doesn't respond to interactions.

Open in

"use client";
 
import { SlideToUnlock } from "@/components/jyotirmoydas/slide-to-unlock";
 
export function SlideToUnlockDemo4() {
  return (
    <SlideToUnlock
      disabled
      defaultChecked={false}
      soundEnabled={false}
      toastEnabled={false}
    />
  );
}