Skip to content

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

Free

Colored Slider for Solid

A Success Rate slider at 60%, with the percentage beside the label and a success color on the fill and thumb.

UI library: Ark UI

Success Rate is on the left and 60% is on the right. The filled part of the track and the thumb border use the success color.

Use it when the color carries a status, such as a rate that looks healthy. A Progress bar is enough when nobody drags the value. In Solid, Ark UI does not pick that color.

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>Success Rate</Label>
        <span class="text-muted-foreground text-sm tabular-nums">
          {value()[0]}%
        </span>
      </div>
      <Slider aria-label={["Success Rate"]} class="[&_[data-slot=slider-range]]:bg-success [&_[data-slot=slider-thumb]]:border-success" onValueChange={handleValueChange} value={value()} />
    </div>

FAQ

How is it colored?

The slider's class sets bg-success on the part with data-slot="slider-range" and border-success on the part with data-slot="slider-thumb". Both follow the theme.

How does the readout follow the thumb?

The value lives in state, starting at 60, and goes back to the slider as value. The percentage beside the label prints it. onValueChange receives details.value, the new array.

How do I use another color?

Swap the tokens, such as bg-destructive or bg-warning. Keep to theme tokens so dark mode still works.

How is the slider named?

The Success Rate 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.

Slider

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

All 29 slider examples