DURangeSlider
FormsDual-thumb numeric range control.
import { DURangeSlider } from 'deri-ui';Live preview
2080
typescript
<DURangeSlider min={0} max={100} onChange={([lo,hi]) => {}} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| min / max | number | 0 / 100 | Bounds |
| value | [number, number] | — | Controlled range |
| onChange | (value: [number, number]) => void | — | Handler |
Usage
import { DURangeSlider } from 'deri-ui';
<DURangeSlider min={0} max={100} onChange={([lo,hi]) => {}} />Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.