edbnedbn/ui
ComponentsMapsAudioPDF
GitHub stars
Explorer
Get Started
Components

Slider

Range slider with single or multi-thumb support.

Componentsdocsbase-ui/slider

Installation

npx shadcn@latest add https://ui.edbn.me/r/slider.json

Manual

API Reference

Root

Groups all parts of the slider. Renders a div element.

defaultValuenumber | number[]

Initial value(s)

valuenumber | number[]

Controlled value(s)

onValueChangefunction

Called on every change

onValueCommittedfunction

Called on pointer up / keyboard commit

minnumber
=0

Minimum value

maxnumber
=100

Maximum value

stepnumber
=1

Step increment

largeStepnumber
=10

Step for Page Up/Down

minStepsBetweenValuesnumber
=0

Min distance between range thumbs

orientation'horizontal' | 'vertical'
='horizontal'

Slider orientation

disabledboolean
=false

Disable slider

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Root data attributes
AttributeDescription
data-draggingPresent while a thumb is being dragged
data-orientationSlider orientation
data-disabledPresent when slider is disabled
data-readonlyPresent when slider is read-only
Root CSS variables
VariableDescription
--slider-valueNormalized thumb value (0–1)
--slider-active-thumb-indexActive thumb index

Track

The background track. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Indicator

The filled range between min and the thumb. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Thumb

The interactive thumb handle. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Thumb data attributes
AttributeDescription
data-draggingPresent while this thumb is being dragged
data-indexThumb index
Thumb CSS variables
VariableDescription
--slider-thumb-valueThis thumb's normalized value (0–1)