Skip to content

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

Free

With Live Preview Slider for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not draw the box.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<div class="flex w-full max-w-md flex-col gap-4">
      <div class="flex items-center justify-between">
        <Label>Border Radius</Label>
        <span class="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 class="h-24 bg-muted-foreground transition-all" style={{
      "border-radius": `${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 details.value, the new 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 Ark UI, aria-label is a list with one name per thumb.

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