Skip to content

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

Free

With Reset Button Slider for Solid

An Adjustment slider that starts at 50, with the current number and a Reset button beside the label.

UI library: Ark UI

Adjustment is on the left. The number and a small Reset button are on the right. The thumb starts at 50, and Reset puts it back there.

Use it for an image or audio tweak people will try and undo. Confirm a wider reset in an Alert Dialog if it wipes more than this slider. In Solid, Ark UI does not remember the default.

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-2">
      <div class="flex items-center justify-between">
        <Label>Adjustment</Label>
        <div class="flex items-center gap-2">
          <span class="text-muted-foreground text-sm tabular-nums">
            {value()[0]}
          </span>
          <Button onClick={reset} size="sm" variant="outline">
            Reset
          </Button>
        </div>
      </div>
      <Slider aria-label={["Adjustment"]} onValueChange={handleValueChange} value={value()} />
    </div>

FAQ

What does Reset do?

It sets the value back to DEFAULT_VALUE, 50, the same constant the state starts from.

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 next to Reset prints it. onValueChange receives details.value, the new array.

Should Reset be disabled at the default?

It is always enabled here. Disable it when the value already equals DEFAULT_VALUE if you want to show there's nothing to reset.

How is the slider named?

The Adjustment 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.

What range does it cover?

0 to 100. min and max set the ends.

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.

Button

Sets onClick={reset}, size="sm" and variant="outline". The rest is on the Button page.

Slider

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

All 29 slider examples