Slider
sliderSelects a numeric value or range along a keyboard-accessible track.
Usage
Basic usage
defaultValue Set the initial value and drag the slider to take the value.
<Slider defaultValue={40} className="w-64" />Display value
showValue Reads the current value above the track.
<Slider defaultValue={60} showValue className="w-64" />Interval selection
defaultValue The passed array automatically becomes a double slider interval selection.
<Slider defaultValue={[25, 75]} showValue className="w-64" />Stepper
step controls the minimum step size, here each step is 10.
<Slider defaultValue={50} step={10} showValue className="w-64" />Disabled
disabled Lock the slider and reduce the overall transparency.
<Slider defaultValue={40} disabled className="w-64" />When to use
Use Slider when users should drag to choose a value or range, such as volume, price, or percentage, and approximate magnitude matters more than exact entry. Use NumberField for precise numbers with step buttons, or Segmented for a small discrete set.
Import
import { Slider } from "@hulianui/ui"Props
Accepts Base UI Slider.Root props except render and children. A numeric value creates a single thumb; an array creates a range automatically.
| Name | Type | Default | Description |
|---|---|---|---|
| value | number|readonly number[] | — | Controlled value; an array represents a range. |
| defaultValue | number|readonly number[] | — | Initial value when uncontrolled. |
| min | number | 0 | minimum value |
| max | number | 100 | maximum value |
| step | number | 1 | step amount |
| disabled | boolean | false | Disable |
| showValue | boolean | false | Shows the current Slider.Value above the track. |
| className | string | — | Root wrapper className |
The remaining props of Base UISlider.Root(name,orientation, etc.) are transparently transmitted as they are.
Events
Common Base UI Slider.Root events are passed through with their upstream signatures.
| Event | Type | Description |
|---|---|---|
| onValueChange | (value: number|number[], eventDetails) => void | Value change callback (pass number for single value, number[] for range) |
| onValueCommitted | (value: number|number[], eventDetails) => void | Callback when dragging ends/submits |
Example
<Slider defaultValue={60} showValue className="w-64" />Range:
<Slider defaultValue={[25, 75]} showValue className="w-64" />Usage guidelines
- Pass a
numberfor one thumb andnumber[]for a range; there is no separate range prop. - Set
showValueto display the numeric readout; it is hidden by default. classNameapplies to the Root wrapper. Supply a width such asw-64, or the slider may collapse to its content width.
Related
Input · Textarea · Select · Checkbox · CheckboxGroup · Radio
Playground
<Slider defaultValue={40} min={0} max={100} step={1} showValue />