shadcn.io is an independent project built on shadcn/ui
Intensity is on the left and 40 is on the right. The track is an outline with a thicker thumb border, and the range still fills from the start.
Use it in a quiet layout where a solid bar would compete. Show a Progress bar if the number is only for reading. In React, Ark UI still paints that fill.
Installation
Anatomy
Usage
<div className="flex w-full max-w-md flex-col gap-2">
<div className="flex items-center justify-between">
<Label>Intensity</Label>
<span className="text-muted-foreground text-sm tabular-nums">
{value[0]}
</span>
</div>
<Slider
aria-label={["Intensity"]}
className="[&_[data-slot=slider-thumb]]:border-2 [&_[data-slot=slider-track]]:border [&_[data-slot=slider-track]]:bg-transparent"
onValueChange={handleValueChange}
value={value}
/>
</div>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 details.value, the new 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.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Slider
Sets aria-label={["Intensity"]}, onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.
