Slider
A range input built from scratch with keyboard navigation, controlled and uncontrolled modes.
Default
An uncontrolled slider with an initial value of 40.
<Slider defaultValue={40} />Controlled
Use value and onValueChange together for controlled mode. Because hooks require a client component, wire this up in your own component:
'use client';
import { useState } from 'react';
import { Slider } from '@venator-ui/ui';
export function VolumeSlider() {
const [volume, setVolume] = useState(40);
return <Slider value={volume} onValueChange={setVolume} />;
}Min, max and step
Use min, max, and step to constrain the range and snap increment.
<Slider defaultValue={50} min={0} max={200} step={10} />Disabled
Pass the disabled prop to prevent interaction.
<Slider defaultValue={40} disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled value |
defaultValue | number | 0 | Initial uncontrolled value |
onValueChange | (value: number) => void | — | Called on change |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Snap increment |
disabled | boolean | false | Prevents interaction |
className | string | '' | Additional Tailwind classes |