Shadcn Slider Components

Shadcn Slider Component

The Shadcn Slider is an input where the user picks a value, or a range of values, by dragging a thumb along a track. It is the natural control for settings that live on a scale: volume, brightness, price filters, ratings and budgets. Users can see the current position at a glance and adjust it with one gesture instead of typing a number.

Price range filters with two thumbs, emoji ratings, tick marks with numbers, minus and plus buttons and a vertical audio equalizer turn the basic React slider into something users enjoy dragging. The component is built with shadcn/ui, React and Tailwind CSS and wraps the Radix UI Slider primitive, which handles pointer dragging, keyboard input, step snapping and the ARIA value attributes.

What is the Shadcn Slider Component?

A slider has a track, a filled range and one or more thumbs. Its value is always an array: one number for a single thumb, two numbers for a range. The shadcn/ui component renders one thumb for every item in value or defaultValue, so [50] gives a single slider and [20, 80] a range slider. min, max and step define the scale, and orientation="vertical" turns it upright.

Sliders are best when the exact number matters less than the relative position. When users need to enter a precise value, such as a quantity or an amount of money, use a number Input or pair the slider with one. For a simple on and off setting, a Switch is clearer, and to show progress that users cannot change, use a Progress bar.

Anatomy of the Shadcn Slider

13 Shadcn Slider Variants

Each slider variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic: A controlled single thumb slider from 0 to 100 that stores its value in React state.
• Reference labels and ticks: Scale labels under or above the track, such as 5 GB to 35 GB or Low and High, and a version with tick marks and numbers.
• With output and icons: The current value in an output element next to the track, and a volume slider framed by mute and speaker icons.
• Emoji rating: One to five scales with emojis at both ends and a text label, or a single emoji that changes as the thumb moves.
• With buttons: Minus and plus buttons on both sides that change a credits per month value by one step, with a live label above.
• Price range: Two thumbs for a minimum and maximum price, with the formatted range shown in the label.
• Vertical and equalizer: Upright single and range sliders, and a row of five vertical sliders from -5 to 5 labelled with audio frequencies.

How to Install the Shadcn Slider Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a slider variant by its name:

npx shadcn@latest add @shadcnuikit/slider1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Slider Component

Import Slider from your components/ui folder. Pass an array to defaultValue for an uncontrolled slider, or use value and onValueChange to keep it in state.

"use client"

import { useState } from "react"

import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"

export function BudgetSlider() {
  const [value, setValue] = useState([400])

  return (
    <div className="grid w-full max-w-xs gap-3">
      <div className="flex items-center justify-between">
        <Label id="budget-label">Monthly budget</Label>
        <span className="text-sm tabular-nums">${value[0]}</span>
      </div>
      <Slider
        aria-labelledby="budget-label"
        value={value}
        onValueChange={setValue}
        min={100}
        max={1000}
        step={50}
      />
    </div>
  )
}

Why Use the Shadcn Slider Component

• Fast adjustments: One drag changes the value, and the position shows where it sits on the scale.
• Single or range: The same component handles one thumb or two, just by changing the length of the value array.
• Keyboard and touch ready: Arrow keys, Page Up and Down, Home and End, and touch dragging all work out of the box.
• Step snapping: The step prop keeps values on clean increments such as 5, 10 or 0.5.
• Horizontal or vertical: Switch orientation for mixers, equalizers and compact side panels.

Common Slider Use Cases

• Price filters: Minimum and maximum price ranges in e-commerce search.
• Media controls: Volume, playback position, brightness and zoom.
• Pricing calculators: Seats, credits or storage amounts that update a price live.
• Ratings and surveys: Satisfaction scales and opinion questions with labelled ends.
• Editor settings: Opacity, border radius, font size and other design tool properties.
• Audio tools: Equalizer bands and mixer channels with vertical sliders.

Customizing the Shadcn Slider

Change the track thickness, range color or thumb shape by targeting the data slots from the className on Slider, for example **:data-[slot=slider-range]:bg-emerald-500. The range uses the primary color token by default, so a new palette from the free Theme Generator updates every slider at once. Use onValueCommit instead of onValueChange when an expensive action, like a network request, should run only when the user releases the thumb.

A thicker track with a square thumb:

<Slider
  defaultValue={[60]}
  className="**:data-[slot=slider-track]:h-3 **:data-[slot=slider-thumb]:size-5 **:data-[slot=slider-thumb]:rounded-md"
/>

Slider Accessibility and Keyboard Support

Each thumb has role="slider" with aria-valuemin, aria-valuemax, aria-valuenow and aria-orientation, so screen readers announce the value as it changes. A slider has no visible text of its own, so it needs an accessible name. Note that the Slider wrapper spreads props such as aria-label onto the root element, not onto the thumb that carries the slider role, so a single thumb slider is not named by it. If screen reader labels matter, extend the wrapper to pass a label to each SliderPrimitive.Thumb, and keep a visible label next to the slider.

When the raw number is not meaningful, for example 3 on a mood scale, show the meaning as text next to the slider, as the emoji rating variant does, so everyone understands "Good" instead of "3". With two thumbs, Radix UI labels them Minimum and Maximum automatically, which keeps range sliders clear for screen reader users.

Slider Best Practices

• Always pass value or defaultValue; without one the component renders two thumbs at the minimum and maximum.
• Show the current value in text next to the slider, especially for prices and quantities.
• Label the ends of the scale when the meaning is not obvious, such as Low and High.
• Pick a step that matches the precision users need; too many possible values make the thumb hard to control.
• Give every slider a visible label and make sure the thumb itself has an accessible name.
• Offer a number Input or plus and minus buttons when users need exact values.

Components Related to Slider

Shadcn Slider FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.