Skip to main content

​
Overview

Volume60
Price range20–20 – 80
Slider lets users select a value or range by dragging a thumb along a track. Use it for settings like volume, brightness, or price range filters.

​
Installation

​
Usage

​
Variants

​
Basic

Volume

​
With Value Display

Brightness30

​
Range Slider

Price range20–20 – 80

​
Disabled

Locked setting

​
API Reference

​
number[]
Controlled value(s). One element for single, two elements for range.
​
number[]
default:"[0]"
Uncontrolled default value.
​
(value: number[]) => void
Callback fired when the value changes while dragging.
​
number
default:"0"
Minimum value.
​
number
default:"100"
Maximum value.
​
number
default:"1"
Increment step between values.
​
string
Label shown above the slider.
​
boolean
default:"false"
Displays the current value next to the label.
​
boolean
default:"false"
Disables the slider.
​
string
default:"horizontal"
Layout orientation. Values: horizontal · vertical
​
string
Additional Tailwind classes for custom overrides.

​
Accessibility

  • Slider uses role="slider" with aria-valuenow, aria-valuemin, and aria-valuemax
  • Arrow keys move the thumb by one step; Page Up/Down move by 10% of the range
  • Home/End keys jump to minimum/maximum
  • Range sliders have two separate thumb elements, each keyboard-navigable
  • disabled uses aria-disabled="true" and removes the element from tab order
  • Label is associated via aria-labelledby

​
Do’s & Don’ts

Do

  • Use Slider for continuous numeric values where precision isn’t critical
  • Always show the current value with showValue when precision matters
  • Use step to constrain values to meaningful increments
  • Use a range Slider for min/max filtering (price, date)

Don't

  • Don’t use Slider when an exact value must be entered — use a number Input
  • Don’t use very small steps on a short track — it becomes imprecise
  • Don’t use Slider for binary on/off settings — use Switch instead
  • Don’t omit a label — the track alone does not convey meaning