Skip to content

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

Free

With Increment/Decrement Buttons Slider for Ark UI

A Quantity slider at 50 between minus and plus buttons that move it by 10, with the number above the track.

Quantity and 50 sit above the track. A minus button and a plus button sit at the ends and change the value by 10.

Use it for a quantity or a zoom level, where a click is easier than a drag. A Number Input is better for a large jump. In React, Ark UI does not render those 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-2">
  <div className="flex items-center justify-between">
    <Label>Quantity</Label>
    <span className="text-muted-foreground text-sm tabular-nums">
      {value[0]}
    </span>
  </div>
  <div className="flex items-center gap-2">
    <Button
      aria-label="Decrease"
      onClick={decrement}
      size="icon-md"
      variant="outline"
    >
      <MinusIcon aria-hidden="true" />
    </Button>
    <Slider
      aria-label={["Quantity"]}
      className="flex-1"
      onValueChange={handleValueChange}
      value={value}
    />
    <Button
      aria-label="Increase"
      onClick={increment}
      size="icon-md"
      variant="outline"
    >
      <PlusIcon aria-hidden="true" />
    </Button>
  </div>
</div>

FAQ

What do the buttons do?

Minus sets the value 10 lower and plus 10 higher, clamped to 0 and 100. They are outline icon buttons at size="icon-md".

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, and the buttons write the same state. onValueChange receives details.value, the new array.

How are the icon buttons named?

With aria-label Decrease and Increase. The icons are aria-hidden="true".

How is the row laid out?

A flex items-center gap-2 row: the outline button, the slider with flex-1, then the other button.

Why do the buttons move 10 and the keys 1?

The buttons add 10 in their handlers; the slider's step is still 1. Change both if you want them to match.

How is the slider named?

Quantity is a visible Label, and the slider has aria-label Quantity. On Ark UI, aria-label is a list with one name per thumb.

API Reference

Label

No extra props in this demo. The rest is on the Label page.

Button

Sets aria-label="Decrease", onClick={decrement}, size="icon-md", variant="outline", aria-label="Increase" and onClick={increment}. The rest is on the Button page.

Slider

Sets aria-label={["Quantity"]}, onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.

All 29 slider examples