Skip to content

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

Free

With Live Preview Slider for React

A Border Radius slider from 0 to 50 px, starting at 50 px, that rounds the box drawn under the track.

Border Radius is on the left and 50px is on the right. A muted box under the track uses that radius.

Use it in an editor where seeing the corner beats reading the number. A Number Input fits if the radius is typed. In React, Base UI does not draw the box.

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>Border Radius</Label>
    <span className="text-muted-foreground text-sm tabular-nums">
      {value[0]}px
    </span>
  </div>
  <Slider
    aria-label="Border Radius"
    max={50}
    min={0}
    onValueChange={handleValueChange}
    value={value}
  />
  <div
    className="h-24 bg-muted-foreground transition-all"
    style={{ borderRadius: `${value[0]}px` }}
  />
</div>

FAQ

How does the box change?

Its inline style sets borderRadius to the value in pixels. transition-all smooths the change.

How does the readout follow the thumb?

The value lives in state, starting at 50, and goes back to the slider as value. The text beside the label prints it with px. onValueChange receives the new value, and the handler stores it as an array.

What range does it cover?

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

What is the preview box?

A div with h-24 and bg-muted-foreground, under the slider in the same column.

How is the slider named?

The Border Radius 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="Border Radius", max={50}, min={0}, onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.

All 29 slider examples