Usage
import { RangeSlider } from '@kivora/react';
function Demo() {
const [range, setRange] = useState<[number, number]>([20, 80]);
return (
<RangeSlider
label="Price range"
value={range}
onChange={setRange}
min={0}
max={100}
showValues
/>
);
}
Props
Controlled value as a tuple [low, high].
defaultValue
[number, number]
default:"[0, 100]"
Default value for uncontrolled mode.
onChange
(value: [number, number]) => void
Called when either handle moves. Receives the new range tuple.
Minimum value of the slider range.
Maximum value of the slider range.
Granularity of value changes.
Label text displayed above the slider.
Displays the current range values (e.g., “20 – 80”).
Disables the slider and prevents interaction.
color
'primary' | 'success' | 'warning' | 'error'
default:"'primary'"
Color theme for the active segment and thumbs.
Minimum distance required between low and high values.
marks
Array<{ value: number; label?: string }>
Optional mark indicators to display below the slider.
Additional CSS classes to apply to the container.
Type Definitions
type RangeSliderValue = [number, number];
Examples
Basic Range Slider
<RangeSlider
defaultValue={[25, 75]}
label="Select range"
/>
With Value Display
<RangeSlider
label="Price range"
value={priceRange}
onChange={setPriceRange}
min={0}
max={1000}
showValues
/>
With Minimum Range
<RangeSlider
label="Time window"
min={0}
max={24}
minRange={2}
defaultValue={[9, 17]}
showValues
/>
With Marks
<RangeSlider
label="Age range"
min={0}
max={100}
defaultValue={[18, 65]}
marks={[
{ value: 0, label: '0' },
{ value: 25, label: '25' },
{ value: 50, label: '50' },
{ value: 75, label: '75' },
{ value: 100, label: '100' }
]}
/>
Different Colors
<RangeSlider label="Primary" color="primary" defaultValue={[20, 80]} />
<RangeSlider label="Success" color="success" defaultValue={[20, 80]} />
<RangeSlider label="Warning" color="warning" defaultValue={[20, 80]} />
<RangeSlider label="Error" color="error" defaultValue={[20, 80]} />
Price Filter Example
function PriceFilter() {
const [range, setRange] = useState<[number, number]>([10, 500]);
return (
<div>
<RangeSlider
label="Price"
value={range}
onChange={setRange}
min={0}
max={1000}
step={10}
showValues
/>
<p className="text-sm text-muted-foreground mt-2">
${range[0]} – ${range[1]}
</p>
</div>
);
}
Time Range Picker
function TimeRangePicker() {
const [hours, setHours] = useState<[number, number]>([9, 17]);
return (
<RangeSlider
label="Working hours"
value={hours}
onChange={setHours}
min={0}
max={24}
minRange={1}
showValues
marks={[
{ value: 0, label: '12am' },
{ value: 6, label: '6am' },
{ value: 12, label: '12pm' },
{ value: 18, label: '6pm' },
{ value: 24, label: '12am' }
]}
/>
);
}
Disabled State
<RangeSlider
label="Disabled"
disabled
defaultValue={[30, 70]}
/>
Notes
- Two independent handles control low and high values
- Active segment between handles shows selected range
- Handles have dynamic z-index - clicked handle moves to front
- Click on track moves nearest handle to that position
minRange prevents handles from getting too close- Values automatically clamped to enforce minRange constraint
- Both handles use native range inputs for accessibility
- Marks display below with optional labels
- Smooth transitions and hover effects
- Values display as “low – high” format when showValues is true