Slider

Ready

Interactive slider with single value or range selection

Interactive Preview

Drag the slider to adjust values

65
0100

Range Slider

Select a range of values with two thumbs

20 - 80
01000

With Min/Max Labels

Display minimum and maximum values

75
0100

Custom Step

Control step increments

Step: 5

3

Step: 25

50
0100

Custom Range

Set custom min and max values

Price ($100-$5000)

500
1005000

Temperature (-20°C to 50°C)

22
-2050

States

Different states for various use cases

Default

50

Disabled

50

Usage

How to use the Slider component

// Basic slider
<Slider
value={value}
onChange={setValue}
label="Volume"
showValue
/>
// Range slider
<Slider
variant="range"
rangeValue={[min, max]}
onRangeChange={setRange}
min={0}
max={1000}
step={10}
/>
// With custom range and step
<Slider
label="Temperature"
min={-20}
max={50}
step={5}
showMinMax
/>

API Reference

Props

value-number - Current slider value (controlled)
defaultValue-number - Initial value (default: 50)
onChange-(value: number) => void - Callback when value changes
min-number - Minimum value (default: 0)
max-number - Maximum value (default: 100)
step-number - Step increment (default: 1)
label-string - Label text
showValue-boolean - Display current value (default: true)
showMinMax-boolean - Display min/max labels (default: false)
disabled-boolean - Disable interaction (default: false)
variant-"default" | "range" - Slider type (default: "default")
rangeValue-[number, number] - Range values (for range variant)
onRangeChange-(value: [number, number]) => void - Range change callback