Range Slider

Buttons

Dual-thumb range slider with framer-motion drag interaction, step snapping, hover/tap scale animations, and ignite-colored active range fill.

Loading preview...
Customize
Min
0
Max
100
Step
1

Props

PropTypeDefaultDescription
minnumber0Minimum value.
maxnumber100Maximum value.
stepnumber1Step increment.
value[number, number]Current range as [low, high] tuple.
onChange(value: [number, number]) => voidCallback when range changes.
classNamestring''Additional CSS classes.