Slider
A simulated slider with horizontal and vertical orientations, pointer dragging and keyboard support
Installation
- $npx litefy@latest add slider
- $pnpm dlx litefy@latest add slider
- $yarn dlx litefy@latest add slider
- $bun --bun litefy@latest add slider
Usage
A simulated slider (track, filled range and thumb) supporting pointer dragging and keyboard arrows, Home and End.
"use client";import { Slider } from "@/ui";export default function SliderBasicDemo() { return ( <div className="flex flex-col gap-4 w-full max-w-sm"> <Slider defaultValue={50} aria-label="Basic slider" /> <Slider defaultValue={30} disabled aria-label="Disabled slider" /> </div> );}Orientation
Vertical sliders are fully rendered by layout with the minimum value at the bottom.
"use client";import { Slider } from "@/ui";export default function SliderOrientationDemo() { return ( <div className="flex items-center gap-16 py-2"> <Slider defaultValue={50} aria-label="Horizontal slider" /> <div className="flex h-40 items-center justify-center"> <Slider defaultValue={50} orientation="vertical" aria-label="Vertical slider" /> </div> </div> );}API Reference
High-level Components
Slider
A simulated slider built with the parts below, encapsulating all state and interaction logic. The value is structurally clamped to min / max, so there is no invalid state to validate.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Current value (controlled) |
defaultValue | number | 0 | Initial value (uncontrolled) |
onChange | (val: number) => void | - | Called when the value changes by dragging, track click or keyboard |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Increment between values; decimals are preserved based on the step precision |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Track orientation; vertical is fully computed in JS (min at the bottom) |
disabled | boolean | false | Disables pointer and keyboard interaction |
name | string | - | Renders a hidden input for form submission |
aria-label | string | - | Accessible label applied to the thumb |
className | ClassNameValue | - | Custom class for the root |
style | React.CSSProperties | - | Custom inline style for the root |
classNames | { track?; fill?; thumb? } | - | Custom classes for each part |
styles | { track?; fill?; thumb? } | - | Custom inline styles for each part |
Keyboard support follows WAI-ARIA slider: arrow keys, PageUp/PageDown, Home and End.
Composable Components
Pure display parts with no built-in state or interaction, for advanced custom assembly.
SliderRoot
The outermost container.
SliderTrack
The sliding track; sized and colored by the consumer (e.g. h-2 w-3xs rounded-full bg-muted).
SliderFill
The filled portion; positioned entirely by inline styles from the consumer.
SliderThumb
The thumb, rendered as a <button>; the consumer wires events and role="slider" aria attributes.