Slider

The slider lets users pick a value, or a range, by dragging a thumb along a track. Use it for volume, brightness, price ranges, and other continuous settings where quick adjustment matters more than typing an exact number.

Preview#

import { Slider, SliderLabel } from "@/components/ui/cubby-ui/slider";
 
export default function SliderBasic() {
  return (
    <Slider className="max-w-sm" defaultValue={50}>
      <SliderLabel>Volume</SliderLabel>

Installation#

npxnpx shadcn@latest add @cubby-ui/slider

Usage#

import { Slider, SliderLabel } from "@/components/ui/cubby-ui/slider";

<Slider>
  <SliderLabel />
</Slider>

Composition#

Slider
├── SliderLabel
└── SliderValue

SliderLabel and SliderValue are optional children that render above the track, so a label and value side by side make a header row:

<Slider defaultValue={[50]}>
  <div className="flex items-center justify-between">
    <SliderLabel>Volume</SliderLabel>
    <SliderValue />
  </div>
</Slider>

For content below the track, render it as a sibling of Slider rather than a child (for example, a <FieldDescription> inside the enclosing <Field>).

Examples#

Controlled#

Use value and onValueChange to control the slider state.

"use client";
 
import { useState } from "react";
import {
  Slider,
  SliderLabel,

Range Slider#

Pass an array value to render two thumbs and select a range.

import { Slider, SliderLabel } from "@/components/ui/cubby-ui/slider";
 
export default function SliderRange() {
  return (
    <Slider
      className="max-w-sm"

With Steps#

Use step to snap to discrete values and showSteps to mark them on the track; markStep spaces the marks wider than step, and showSteps="hover" shows them only while the slider is in use. Dragging follows the pointer between steps, and the thumb settles on the nearest one when you let go.

import { Slider, SliderLabel } from "@/components/ui/cubby-ui/slider";
 
export default function SliderWithSteps() {
  return (
    <Slider className="max-w-sm" defaultValue={50} step={25} showSteps>
      <SliderLabel>Step: 25</SliderLabel>

With Value Display#

Add SliderValue to show the current value beside the slider.

import {
  Slider,
  SliderLabel,
  SliderValue,
} from "@/components/ui/cubby-ui/slider";
 

Vertical Orientation#

Set orientation="vertical" to lay the slider out vertically.

import { Slider } from "@/components/ui/cubby-ui/slider";
 
export default function SliderVertical() {
  return <Slider className="h-44" orientation="vertical" defaultValue={50} getAriaLabel={() => "Vertical slider"} />;
}

Variants#

Use variant to change the slider's visual style.

import { Slider } from "@/components/ui/cubby-ui/slider";
 
export default function SliderVariant() {
  return (
    <div className="w-full max-w-sm space-y-6">
      <Slider

Bar With Value#

Pass SliderValue as endLabel to show the live value inside the track, formatted by the slider's format prop. The labels are decorative, so still name the slider with getAriaLabel or a SliderLabel.

import { Slider, SliderValue } from "@/components/ui/cubby-ui/slider";
 
export default function SliderBarValue() {
  return (
    <Slider
      variant="bar"

Color#

Use color="primary" to fill the range with the brand color instead of the default emphasis grey that checked checkboxes, radios, and switches share.

import { Slider, SliderLabel } from "@/components/ui/cubby-ui/slider";
 
export default function SliderColor() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <Slider defaultValue={50}>

With Reference Scale#

Render a reference scale as a sibling below Slider, where it needs no slider context; a SliderLabel child still sits above the track.

import { Slider, SliderLabel } from "@/components/ui/cubby-ui/slider";
 
export default function SliderWithScale() {
  return (
    <div className="w-full max-w-sm">
      <Slider defaultValue={15} min={5} max={35}>

Disabled State#

Set disabled to prevent interaction.

import { Slider } from "@/components/ui/cubby-ui/slider";
 
export default function SliderDisabledState() {
  return <Slider className="max-w-sm" defaultValue={50} disabled getAriaLabel={() => "Disabled slider"} />;
}

Form Integration#

Slider works with two submission flows. With Base UI's onFormSubmit, values come from registered Fields, so wrap each slider in <Field name="..."> (and compose with Fieldset for multi-thumb groups so each thumb keeps its own aria-label under a shared legend). With a native onSubmit, Slider's hidden input makes name sufficient on its own. The example below shows both. See the Forms guide for more patterns.

"use client";
 
import { Button } from "@/components/ui/cubby-ui/button";
import { Field } from "@/components/ui/cubby-ui/field";
import { Fieldset, FieldsetLegend } from "@/components/ui/cubby-ui/fieldset";
import { Form } from "@/components/ui/cubby-ui/form";

Accessibility#

The slider is operable from the keyboard: focus a thumb, then use the arrow keys to adjust by step, Home/End to jump to the min and max, and PageUp/PageDown for larger increments.

Give the slider an accessible name when there is no visible SliderLabel. For a range slider, use getAriaLabel so each thumb gets its own label.

<Slider
  defaultValue={[20, 60]}
  getAriaLabel={(index) => (index === 0 ? "Minimum price" : "Maximum price")}
/>

API Reference#

The Slider is built on top of Base UI's Slider. All Base UI props are supported except thumbAlignment, which the variant sets. The documentation below only covers custom props and the props our implementation handles.

For the complete Base UI API, see the Base UI Slider documentation.

Props#

Slider#

Track, fill, marks, and thumbs for one value or a range. Composes Base UI's Slider.Root, Slider.Control, Slider.Track, Slider.Indicator, and Slider.Thumb. Props are forwarded to Slider.Root.

SliderValue#

The current value as text, formatted by the slider's format prop. Wraps Base UI's Slider.Value.

SliderLabel#

The slider's visible label. Wraps Base UI's Slider.Label.

Upgrading#

If you're reinstalling over an earlier version, check these changes: