Slider

A slider allows a user to select one or more values within a range.

Installation

CLI

Manual

npx shadcn@latest add https://hq-ui.vercel.app/r/slider

Blocks

slider-demo

Opacity20

slider-step-demo

Progress tracking20

Step in 10

slider-controlled-demo

Temperature31

Current temperature: 31

Saturation21 – 86

Current saturation: 2186

slider-prefix-suffix-demo

Volume

slider-vertical-demo

0

dB

0

dB

0

dB

0

dB

0

dB

0

dB

0

dB

0

dB

0

dB

0

dB

slider-range-demo

Distance Range25 – 75