Creative Tim UICreative Tim UI

Shadcn Slider

PreviousNext

A slider component that allows users to select a value or range of values by dragging a thumb along a track, perfect for volume controls, price ranges, and numeric inputs.

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

export function SliderDemo() {
  return (
    <div className="w-64">
      <Slider defaultValue={[50]} max={100} step={1} />
    </div>
  )
}

Installation

pnpm dlx @creative-tim/ui@latest add slider

Usage

import { Slider } from "@/components/ui/slider"
<Slider defaultValue={[50]} max={100} step={1} />

Examples

Slider Colors

Slider components with different color schemes (primary, secondary, info, success, warning, error) to visually distinguish between different slider states and provide visual variety.

import { cn } from "@/lib/utils"
import { Slider } from "@/components/ui/slider"

export function SliderColors() {
  return (
    <div className="flex w-64 flex-col gap-8">
      <Slider
        defaultValue={[50]}
        max={100}
        step={1}
        className={cn(
          "[&_[data-slot=slider-range]]:bg-primary [&_[data-slot=slider-thumb]]:border-primary"
        )}
      />
      <Slider
        defaultValue={[50]}
        max={100}
        step={1}
        className={cn(
          "[&_[data-slot=slider-range]]:bg-secondary [&_[data-slot=slider-thumb]]:border-secondary"
        )}
      />
      <Slider
        defaultValue={[50]}
        max={100}
        step={1}
        className={cn(
          "[&_[data-slot=slider-range]]:bg-blue-500 [&_[data-slot=slider-thumb]]:border-blue-500"
        )}
      />
      <Slider
        defaultValue={[50]}
        max={100}
        step={1}
        className={cn(
          "[&_[data-slot=slider-range]]:bg-green-500 [&_[data-slot=slider-thumb]]:border-green-500"
        )}
      />
      <Slider
        defaultValue={[50]}
        max={100}
        step={1}
        className={cn(
          "[&_[data-slot=slider-range]]:bg-yellow-500 [&_[data-slot=slider-thumb]]:border-yellow-500"
        )}
      />
      <Slider
        defaultValue={[50]}
        max={100}
        step={1}
        className={cn(
          "[&_[data-slot=slider-range]]:bg-destructive [&_[data-slot=slider-thumb]]:border-destructive"
        )}
      />
    </div>
  )
}

Slider Sizes

Slider components in different sizes (small, medium, large) to accommodate various design needs and improve visual hierarchy.

import { cn } from "@/lib/utils"
import { Slider } from "@/components/ui/slider"

export function SliderSizes() {
  return (
    <div className="flex w-64 flex-col gap-8">
      <Slider
        defaultValue={[50]}
        max={100}
        step={1}
        className={cn(
          "[&_[data-slot=slider-thumb]]:size-3 [&_[data-slot=slider-track]]:h-1"
        )}
      />
      <Slider
        defaultValue={[50]}
        max={100}
        step={1}
        className={cn(
          "[&_[data-slot=slider-thumb]]:size-4 [&_[data-slot=slider-track]]:h-1.5"
        )}
      />
      <Slider
        defaultValue={[50]}
        max={100}
        step={1}
        className={cn(
          "[&_[data-slot=slider-thumb]]:size-5 [&_[data-slot=slider-track]]:h-2"
        )}
      />
    </div>
  )
}

Slider with Ticks

A slider component with tick marks and labels that indicate specific values along the track, making it easier for users to select precise values.

0
10
20
30
40
50
60
70
80
90
100
"use client"

import * as React from "react"

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

export function SliderWithTicks() {
  const [value, setValue] = React.useState([50])

  return (
    <div className="w-80">
      <Slider
        value={value}
        onValueChange={setValue}
        max={100}
        step={10}
        className="mb-6"
      />
      <div className="relative -mt-2 flex justify-between px-1">
        {Array.from({ length: 11 }, (_, i) => (
          <div
            key={i}
            className="flex flex-col items-center"
            style={{ left: `${(i / 10) * 100}%` }}
          >
            <div className="bg-border h-2 w-px" />
            <span className="text-muted-foreground mt-1 text-xs">{i * 10}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

Range Slider with Two Thumbs

A range slider component with two thumbs that allows users to select a range of values, perfect for price ranges, date ranges, or any scenario requiring dual value selection.

"use client"

import * as React from "react"

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

export function RangeSliderWithTwoThumbs() {
  const [value, setValue] = React.useState([20, 80])

  return (
    <div className="w-80">
      <Slider
        value={value}
        onValueChange={setValue}
        max={100}
        min={0}
        step={1}
      />
    </div>
  )
}

Props

The slider component is built using Radix UI's Slider primitive and accepts the following props:

Slider

PropTypeDefaultDescription
valuenumber[]-The controlled value(s) of the slider
defaultValuenumber[]-The default value(s) of the slider (uncontrolled)
onValueChange(value: number[]) => void-Event handler called when the value changes
minnumber0The minimum value of the slider
maxnumber100The maximum value of the slider
stepnumber1The step increment for the slider
disabledbooleanfalseWhen true, prevents the user from interacting with the slider
orientation"horizontal" | "vertical""horizontal"The orientation of the slider
classNamestring-Additional CSS classes to apply to the slider

Accessibility

The slider component follows accessibility best practices:

  • Uses proper ARIA attributes for screen readers
  • Supports keyboard navigation (Arrow keys to adjust, Home/End to jump to min/max)
  • Focus states are clearly visible for keyboard users
  • Disabled state is properly communicated to assistive technologies
  • Maintains proper semantic HTML structure
  • Provides aria-label or aria-labelledby for descriptive labels
  • Supports aria-valuemin, aria-valuemax, and aria-valuenow for proper value communication

Best Practices

  • Use sliders for selecting numeric values within a range
  • Provide clear labels that describe what the slider controls
  • Use appropriate min, max, and step values for your use case
  • Consider using tick marks for sliders with specific value points
  • Use range sliders when users need to select a range of values
  • Ensure sufficient contrast between the track and thumb colors
  • Test keyboard navigation and screen reader compatibility
  • Use appropriate sizes based on the importance and context of the slider
  • Consider using colors to indicate different states or categories
  • Provide visual feedback when the value changes

The slider component provides a clean and accessible way to create range input controls. It's ideal for volume controls, price filters, date ranges, numeric inputs, settings panels, and any interface where users need to select values within a range.