shadcn.io is not affiliated with official shadcn/ui
Slider examples · Styled
Minimal Style Slider for React
An Intensity slider drawn as an outlined track with no fill behind it.
Framework
UI library
A lighter look: the track is an outline instead of a solid bar, and the thumb has a thicker border. The value still fills from the start. Use it in quiet, low-contrast interfaces.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
How is the outline drawn?
The slider's class gives the part with data-slot="slider-track" a border and bg-transparent, and the thumb border-2.
How does the readout follow the thumb?
The value lives in state, starting at 40, and goes back to the slider as value. The number beside the label prints it.
onValueChange receives the new value, and the handler stores it as an array.
Does the filled range still show?
Yes. Only the track's background is removed, so the range still fills from the start to the thumb.
Related
- Large/Thick SliderA Volume slider with a thicker track and
- Simple SliderA single-thumb slider with no label or
- Colored SliderA Success Rate slider whose fill and
- With Gradient Track SliderA Heat slider on a track that fades from
- Button with Text (Standard)The one filled action
- Input with LabelA text input with a label above it