Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Slider examples · Interactive

With Increment/Decrement Buttons Slider for React

A Quantity slider between minus and plus buttons that move it by 10.

Framework
UI library

Buttons give precise steps when dragging is fiddly. Minus and plus sit at each end of the track and move the value by 10, stopping at 0 and 100. Use it for quantities and zoom levels.

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

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 the new value, and the handler stores it as an 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 Base UI, aria-label is one string on the slider.

All 29 slider examples