Installation
npm install @kuzenbo/core
Usage
import { RangeSlider } from "@kuzenbo/core";
import { useState } from "react";
function Example() {
const [value, setValue] = useState<[number, number]>([25, 75]);
return (
<RangeSlider
value={value}
onChange={setValue}
min={0}
max={100}
/>
);
}
Props
The default value (uncontrolled mode).
onChange
(value: [number, number]) => void
Callback when value changes.
onChangeEnd
(value: [number, number]) => void
Callback when the user finishes changing the value.
Minimum distance between thumbs.
Maximum distance between thumbs.
Whether the slider is disabled.
size
'xs' | 'sm' | 'md' | 'lg' | 'xl'
default:"'md'"
The size of the slider.
Function or format string for thumb labels.
Whether to always show labels.
Whether to show labels on hover.
Array of marks to display on the track.
Accessible label for the start thumb.
Accessible label for the end thumb.
Whether thumbs push each other when overlapping.
Whether to invert the slider direction.
Examples
Basic Range
const [range, setRange] = useState<[number, number]>([20, 80]);
<RangeSlider value={range} onChange={setRange} />
Price Range
const [priceRange, setPriceRange] = useState<[number, number]>([0, 1000]);
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>${priceRange[0]}</span>
<span>${priceRange[1]}</span>
</div>
<RangeSlider
value={priceRange}
onChange={setPriceRange}
min={0}
max={1000}
step={10}
label={(value) => `$${value}`}
/>
</div>
With Marks
<RangeSlider
defaultValue={[25, 75]}
marks={[
{ value: 0, label: "0%" },
{ value: 25, label: "25%" },
{ value: 50, label: "50%" },
{ value: 75, label: "75%" },
{ value: 100, label: "100%" },
]}
/>
Always Show Labels
<RangeSlider
defaultValue={[30, 70]}
labelAlwaysOn
/>
Custom Min/Max Range
<RangeSlider
defaultValue={[40, 60]}
minRange={5} // Minimum 5 units apart
maxRange={30} // Maximum 30 units apart
/>
Vertical Orientation
<div className="h-64">
<RangeSlider
orientation="vertical"
defaultValue={[25, 75]}
/>
</div>
Custom Step
<RangeSlider
min={0}
max={100}
step={5}
defaultValue={[20, 80]}
/>
Different Sizes
<div className="space-y-8">
<RangeSlider size="sm" defaultValue={[25, 75]} />
<RangeSlider size="md" defaultValue={[25, 75]} />
<RangeSlider size="lg" defaultValue={[25, 75]} />
</div>
With Color
<RangeSlider
defaultValue={[25, 75]}
color="oklch(0.6 0.2 250)"
/>