Slide to Unlock

A sleek, interactive slider inspired by the classic iPhone OS "slide to unlock" gesture.

slide to unlock

Installation

pnpm dlx ncdai add slide-to-unlock

import {
  SlideToUnlock,
  SlideToUnlockHandle,
  SlideToUnlockText,
  SlideToUnlockTrack,
} from "@/components/slide-to-unlock";

<SlideToUnlock>
  <SlideToUnlockTrack>
    <SlideToUnlockText />
    <SlideToUnlockHandle />
  </SlideToUnlockTrack>
</SlideToUnlock>

The root component that provides context for all child components.

Prop	Type	Default	Description
`handleWidth`	`number`	`56`	Width of the draggable handle in pixels.
`onUnlock`	`() => void`	—	Callback function triggered when the handle reaches the end.
`className`	`string`	—	Additional CSS classes to apply to the root element.

The container that holds the text and handle components.

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes to apply to the track element.

The text label that fades out as the handle is dragged.

Prop	Type	Default	Description
`children`	`ReactNode \| (props: { isDragging: boolean }) => ReactNode`	—	Text content or render function that receives dragging state.
`className`	`string`	—	Additional CSS classes to apply to the text element.
`style`	`React.CSSProperties`	—	Inline styles to apply to the text element.

The draggable handle element.

Prop	Type	Default	Description
`children`	`ReactNode`	Arrow icon	Custom icon or content to display inside the handle.
`className`	`string`	—	Additional CSS classes to apply to the handle element.
`style`	`React.CSSProperties`	—	Inline styles to apply to the handle element.

slide to unlock

slide to answer

slide to stop