slider
Accessible range slider with keyboard support and drag interaction.
A headless slider following the WAI-ARIA slider pattern. The track is measured
once at pointerdown and reused for the whole drag to prevent layout shifts.
Installation
pnpm add @fluixi/slider
Usage
import { Slider, SliderTrack, SliderRange, SliderThumb } from '@fluixi/slider';
<Slider value={volume()} onChange={setVolume} min={0} max={100} step={1}>
<SliderTrack>
<SliderRange />
<SliderThumb />
</SliderTrack>
</Slider>
Parts
| Part | Description |
|---|---|
Slider |
Root. value/defaultValue/onChange; min (0), max (100), step (1), disabled, orientation. |
SliderTrack |
The track bar; receives pointer events. |
SliderRange |
The filled portion of the track. |
SliderThumb |
The draggable handle. aria-valuemin/max/now/valuetext; arrow-key increments. |
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.