ComponentsFormSlider

Slider

6 colors · 5 sizes · thumb styles · track styles · marks · range · vertical

BasicColorsThumb stylesTrack stylesSizesMarksWith inputRangeVertical

Basic

Live preview

showLabels shows min/max, showTooltip shows the current value above the thumb

0100

App.tsx

tsx

1const [volume, setVolume] = useState(72)
2 
3<Slider value={volume} onChange={setVolume} showLabels showTooltip />
4<Slider value={volume} onChange={setVolume} showLabels showTooltip disabled />

Colors

Live preview

Six color variants for the track and thumb

App.tsx

tsx

1<Slider defaultValue={60} color="default"   showTooltip />
2<Slider defaultValue={60} color="secondary" showTooltip />
3<Slider defaultValue={60} color="success"   showTooltip />
4<Slider defaultValue={60} color="warning"   showTooltip />
5<Slider defaultValue={60} color="error"     showTooltip />

Thumb styles

Live preview

default, pill, square, and bubble thumb shapes

App.tsx

tsx

1<Slider defaultValue={50} thumbStyle="default" showTooltip />
2<Slider defaultValue={50} thumbStyle="pill"    showTooltip />
3<Slider defaultValue={50} thumbStyle="square"  showTooltip />
4<Slider defaultValue={50} thumbStyle="bubble"  showTooltip />

Track styles

Live preview

default, glow, gradient, and spectrum filled track styles

App.tsx

tsx

1<Slider defaultValue={65} trackStyle="default"  showTooltip formatValue={v => `${v}%`} />
2<Slider defaultValue={65} trackStyle="glow"     showTooltip formatValue={v => `${v}%`} />
3<Slider defaultValue={65} trackStyle="gradient" showTooltip formatValue={v => `${v}%`} />
4<Slider defaultValue={65} trackStyle="spectrum" showTooltip formatValue={v => `${v}%`} />

Sizes

Live preview

Five track heights: xs, sm, md (default), lg, xl

App.tsx

tsx

1<Slider defaultValue={50} size="xs" showTooltip />
2<Slider defaultValue={50} size="sm" showTooltip />
3<Slider defaultValue={50} size="md" showTooltip />
4<Slider defaultValue={50} size="lg" showTooltip />
5<Slider defaultValue={50} size="xl" showTooltip />

With marks

Live preview

Auto tick marks every step, or custom marks with labels

0100

0°20°40°60°80°100°

0100

App.tsx

tsx

1const temperatureMarks = [
2  { value: 0,   label: '0°' },
3  { value: 20,  label: '20°' },
4  { value: 40,  label: '40°' },
5  { value: 60,  label: '60°' },
6  { value: 80,  label: '80°' },
7  { value: 100, label: '100°' },
8]
9 
10{/* Auto marks every 20% */}
11<Slider value={temp} onChange={setTemp} step={20} showMarks showTooltip showLabels />
12 
13{/* Custom marks with labels */}
14<Slider value={temp} onChange={setTemp} marks={temperatureMarks} showTooltip showLabels />

With input

Live preview

showInput adds a number input field that stays in sync with the slider

App.tsx

tsx

1<Slider value={brightness} onChange={setBrightness} showInput showTooltip />

Range slider

Live preview

RangeSlider lets the user select a min/max range with two thumbs

$250 — $750

$0$1000

App.tsx

tsx

1const [price, setPrice] = useState<[number, number]>([250, 750])
2 
3<RangeSlider
4  value={price}
5  onChange={setPrice}
6  min={0}
7  max={1000}
8  showTooltip
9  showLabels
10  formatValue={v => `$${v}`}
11/>

Vertical

Live preview

Set orientation=vertical for column-direction sliders

App.tsx

tsx

1<Slider
value={opacity}
onChange={setOpacity}
orientation="vertical"
showTooltip
showLabels
formatValue={v => `${v}%`}
8/>

Volume control

Live preview

Pair an Icon with a Slider for a compact media control

App.tsx

tsx

1<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<i className="ti ti-volume" style={{ fontSize: 16, color: 'var(--color-text-secondary)', flexShrink: 0 }} aria-hidden="true" />
<Slider
  value={volume}
  onChange={setVolume}
  size="xs"
  thumbStyle="default"
  color="default"
  style={{ flex: 1 }}
/>
<i className="ti ti-volume-2" style={{ fontSize: 20, color: 'var(--color-text-primary)', flexShrink: 0 }} aria-hidden="true" />
<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--color-text-primary)', minWidth: 28, textAlign: 'right' }}>{volume}</span>
13</div>

Slider props

Props

PropTypeDefaultDescription

valuenumber—Controlled value

defaultValuenumber0Uncontrolled initial value

minnumber0Minimum value

maxnumber100Maximum value

stepnumber1Step between values

onChange(value: number) => void—Callback fired on value change

color'default' | 'secondary' | 'success' | 'warning' | 'error''default'Track and thumb color

size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Height of the track

thumbStyle'default' | 'pill' | 'square' | 'bubble''default'Shape of the thumb

trackStyle'default' | 'glow' | 'gradient' | 'spectrum''default'Visual style of the filled track

orientation'horizontal' | 'vertical''horizontal'Direction of the slider

showLabelsbooleanfalseShows min and max labels

showTooltipbooleanfalseShows a tooltip above the thumb

showMarksbooleanfalseShows tick marks along the track

marks{ value: number; label?: string }[]—Custom mark positions and labels

showInputbooleanfalseShows a number input alongside the slider

formatValue(value: number) => string—Formats the tooltip / label value

disabledbooleanfalseDisables the slider

RangeSlider props

Props

PropTypeDefaultDescription

value[number, number]—Controlled range value

defaultValue[number, number][0, 100]Uncontrolled initial range

minnumber0Minimum value

maxnumber100Maximum value

stepnumber1Step between values

onChange(value: [number, number]) => void—Callback fired on range change

color'default' | 'secondary' | 'success' | 'warning' | 'error''default'Track and thumb color

size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Height of the track

showLabelsbooleanfalseShows min and max labels

showTooltipbooleanfalseShows tooltips above both thumbs

formatValue(value: number) => string—Formats the tooltip / label values

disabledbooleanfalseDisables the range slider