- Docs
- components
- Slider
Slider
A slider allows a user to select one or more values within a range.
The <input type="range"> HTML element can be used to build a slider, however it is very difficult to style cross browser. Slider helps achieve accessible sliders that can be styled as needed.
Preview
Code
Installation
CLI
Copy & Paste
NPM
PNPM
Bun
Yarn
npx shadcn@latest add https://backchanel.com/default/sliderExamples
Basic
Preview
Code
Validation
Custom value scale
Preview
Code
Step values
Preview
Code
Visual Options
Vertical orientation
Preview
Code
Disabled
Preview
Code