Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Range with Constraints Slider for Ark UI

A Constrained Range slider from 0 to 100, opening at 20 and 60, with the thumbs kept at least 10 apart.

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 React, Ark UI does not write the gap note.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Slider anatomy: root, label, value, track, range, thumb

Usage

<div className="flex w-full max-w-md flex-col gap-2">
  <div className="flex items-center justify-between">
    <Label>Constrained Range</Label>
    <span className="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}
    onValueChange={handleValueChange}
    value={value}
  />
  <p className="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. onValueChange receives details.value, the new array.

What is the text under the track?

Minimum gap: 10, printed from the same MIN_GAP, so the note and the rule never disagree.

What range does it cover?

0 to 100 in steps of 1. min and max set the ends.

How are the thumbs named?

Constrained Range is a visible Label. On Ark UI, aria-label names each thumb: Range start and Range end.

Can I move it from the keyboard?

Yes. The thumb takes focus with Tab. The arrow keys move it by one step, Page Up and Page Down by a larger step, and Home and End jump to the ends.

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}, onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.

All 29 slider examples