Haedong
024

Slider

Form
Volume40

Customize

Step
Disabled

Code

<Slider
  value={volume}
  onValueChange={setVolume}
  aria-label="Volume"
/>

Install

npx shadcn@latest add https://components.haedong.dev/r/slider.json

Props

Extends the native input props (min, max, step, name, disabled, aria-label…); type is fixed to range. Label it with aria-label / aria-labelledby or wrap it in Field.

PropTypeDescription
value / defaultValuenumberCurrent value (controlled / uncontrolled). Defaults to min.
onValueChange(value: number) => voidCalled on drag and keyboard changes with a number.
min / max / stepnumberRange and increment. Defaults 0 / 100 / 1.
disabledbooleanDims to 40% and drops pointer events.