shadcn.io is an independent project built on shadcn/ui
Constrained Range is on the left and 20 - 60 is on the right. Under the track, a note reads Minimum gap: 10.
Use it for a booking window or any span that must not collapse. A Date Picker is clearer when each end is a date. In Vue, Ark UI does not write the gap note.
Installation
Anatomy
Usage
<div class="flex w-full max-w-md flex-col gap-2">
<div class="flex items-center justify-between">
<Label>Constrained Range</Label>
<span class="text-muted-foreground text-sm tabular-nums">
{{ value[0] }} - {{ value[1] }}
</span>
</div>
<Slider
:aria-label='["Range start", "Range end"]'
:max="100"
:min="0"
:minStepsBetweenThumbs="MIN_GAP"
@value-change="handleValueChange"
:value="value"
/>
<p class="text-muted-foreground text-xs">Minimum gap: {{ MIN_GAP }}</p>
</div>FAQ
How is the gap enforced?
MIN_GAP is 10, and the slider will not let the thumbs come closer than that.
It is passed as minStepsBetweenThumbs. With step 1, that is a gap of 10.
How does the readout follow the thumb?
The value lives in state, starting at [20, 60], and goes back to the slider as value. The two numbers beside the label print them.
The Vue file binds :value and listens to @value-change, which receives details.value.
What is the text under the track?
Minimum gap: 10, printed from the same MIN_GAP, so the note and the rule never disagree.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Slider
Sets aria-label="[Range start, Range end]", max="100", min="0", minStepsBetweenThumbs="MIN_GAP", value-change="handleValueChange" and value="value". The rest is on the Slider page.
