Slider

An input where the user selects a value from within a given range.

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

export function SliderDemo() {
  return (
    <Slider
      defaultValue={[33]}
      max={100}
      step={1}
      className="mx-auto w-full max-w-xs"
    />
  )
}

Installation

pnpm dlx cubix@latest add slider --base aria

Usage

Import

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

Example

<Slider defaultValue={[33]} max={100} step={1} />

Range

Use an array with two values for a range slider.

<Slider
  defaultValue={[25, 50]}
  max={100}
  step={5}
  className="mx-auto w-full max-w-xs"
/>

Multiple Thumbs

Use an array with multiple values for multiple thumbs.

<Slider
  defaultValue={[10, 20, 70]}
  max={100}
  step={10}
  className="mx-auto w-full max-w-xs"
/>

Vertical

Use orientation="vertical" for a vertical slider.

<div className="mx-auto flex w-full max-w-xs items-center justify-center gap-6">
  <Slider
    defaultValue={[50]}
    max={100}
    step={1}
    orientation="vertical"
    className="h-40"
  />
  <Slider
    defaultValue={[25]}
    max={100}
    step={1}
    orientation="vertical"
    className="h-40"
  />
</div>

Controlled

Temperature0.3, 0.7

"use client"

import * as React from "react"

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

export function SliderControlledDemo() {
  const [value, setValue] = React.useState([0.3, 0.7])

  return (
    <div className="mx-auto grid w-full max-w-xs gap-3">
      <div className="flex items-center justify-between gap-2">
        <Label htmlFor="slider-demo-temperature">Temperature</Label>
        <span className="text-sm text-muted-foreground tabular-nums">
          {value.join(", ")}
        </span>
      </div>
      <Slider
        id="slider-demo-temperature"
        value={value}
        onValueChange={(next) => setValue(next as number[])}
        min={0}
        max={1}
        step={0.1}
      />
    </div>
  )
}

Disabled

Use the disabled prop to disable the slider.

<Slider
  defaultValue={[50]}
  max={100}
  step={1}
  disabled
  className="mx-auto w-full max-w-xs"
/>

RTL

Wrap the slider in a container with dir="rtl" to mirror direction.

<div dir="rtl" className="w-full">
  <Slider
    defaultValue={[40]}
    max={100}
    step={1}
    className="mx-auto w-full max-w-xs"
  />
</div>

API Reference

See also the Base UI Slider documentation for primitive props.

Slider

Prop	Type	Default	Description
defaultValue	number \| number[]	-	Uncontrolled initial value. Use a single-item array for one thumb, or multiple values for a range.
value	number \| number[]	-	Controlled value. Thumb count matches the array length.
onValueChange	(value: number \| number[], eventDetails?) => void	-	Called while the value changes (for example during drag).
onValueCommitted	(value: number \| number[], eventDetails?) => void	-	Called when a change is committed (Base UI). Radix uses onValueCommit.
min	number	0	Minimum allowed value.
max	number	100	Maximum allowed value.
step	number	1	Step increment when adjusting the value.
orientation	"horizontal" \| "vertical"	"horizontal"	Layout orientation of the slider.
disabled	boolean	false	When true, interaction is disabled.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).