Skip to content

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

Free

With Preset Values Slider for React

A Level slider at 50 with five buttons under the track that jump straight to 0, 25, 50, 75, or 100.

Level and 50 sit above the track. Under it, outline buttons read 0, 25, 50, 75, and 100.

Use it when a few values come up often and the slider covers the rest. A Toggle Group is enough if only those five exist. In React, Base UI does not render the preset buttons.

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-4">
  <div className="flex items-center justify-between">
    <Label>Level</Label>
    <span className="text-muted-foreground text-sm tabular-nums">
      {value[0]}
    </span>
  </div>
  <Slider
    aria-label="Level"
    onValueChange={handleValueChange}
    value={value}
  />
  <div className="flex gap-2">
    {presets.map((preset) => (
      <Button
        className="flex-1"
        key={preset}
        onClick={handlePresetClick}
        size="sm"
        value={String(preset)}
        variant="outline"
      >
        {preset}
      </Button>
    ))}
  </div>
</div>

FAQ

How do the buttons set the value?

Each button carries its preset as its value, and one shared handler reads it and stores it.

How does the readout follow the thumb?

The value lives in state, starting at 50, 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.

How are the buttons laid out?

A flex gap-2 row with flex-1 on each, so the five share the width equally.

Where do the presets come from?

A presets array at the top of the file: 0, 25, 50, 75 and 100.

How is the slider named?

The Level text is a visible Label, and the slider gets the same name with aria-label, so screen readers announce what it sets. On Base UI, aria-label is one string on the slider.

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

Button

Sets onClick={handlePresetClick}, size="sm", value={String(preset)} and variant="outline". The rest is on the Button page.

All 29 slider examples