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 Vue, Ark UI still paints that fill.
Installation
Anatomy
Usage
<div class="flex w-full max-w-md flex-col gap-2">
<div class="flex items-center justify-between">
<Label>Intensity</Label>
<span class="text-muted-foreground text-sm tabular-nums">{{ value[0] }}</span>
</div>
<Slider
:aria-label='["Intensity"]'
class="[&_[data-slot=slider-thumb]]:border-2 [&_[data-slot=slider-track]]:border [&_[data-slot=slider-track]]:bg-transparent"
@value-change="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.
The Vue file binds :value and listens to @value-change, which receives details.value.
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]", value-change="handleValueChange" and value="value". The rest is on the Slider page.
