Slider

Pick a value or a range by dragging, tapping the track or using the keys, with jumps that glide and an optional value bubble.

Volume

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

export function SliderDemo() {
  return (
    <Slider defaultValue={60} className="max-w-xs">
      <SliderLabel>Volume</SliderLabel>
      <SliderValue />
    </Slider>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/slider.json

Adds the component, the HextaUI theme tokens and any HextaUI components it depends on.

Add the theme tokens to your global CSS, if you haven’t yet.

Install the dependencies.

pnpm add @base-ui/react class-variance-authority cn

Copy and paste the following code into your project.

components/ui/slider.tsx

"use client"

import * as React from "react"
import {
  DirectionProvider,
  useDirection,
  type TextDirection,
} from "@base-ui/react/direction-provider"
import { Slider as SliderPrimitive } from "@base-ui/react/slider"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

type ClassName<State> =
  string | ((state: State) => string | undefined) | undefined

function mergeClassName<State>(base: string, className: ClassName<State>) {
  return typeof className === "function"
    ? (state: State) => cn(base, className(state))
    : cn(base, className)
}

const jumpTime = 180

const sliderVariants = cva(
  "group/slider flex min-w-0 data-disabled:opacity-50",
  {
    variants: {
      size: {
        sm: "[--slider-thumb:0.875rem] [--slider-track:0.25rem]",
        default: "[--slider-thumb:1.125rem] [--slider-track:0.375rem]",
        lg: "[--slider-thumb:1.375rem] [--slider-track:0.5rem]",
      },
    },
    defaultVariants: {
      size: "default",
    },
  }
)

const orientationClasses = {
  horizontal: {
    root: "w-full flex-wrap items-center gap-x-3 gap-y-2",
    control:
      "h-(--slider-thumb) w-full basis-full before:inset-x-0 before:-inset-y-2 pointer-coarse:before:-inset-y-3.5",
    track: "h-(--slider-track) w-full",
    value: "bottom-[calc(100%+0.5rem)] left-1/2 -translate-x-1/2 origin-bottom",
  },
  vertical: {
    root: "h-full flex-col items-center gap-3",
    control:
      "min-h-40 w-(--slider-thumb) flex-1 flex-col justify-center before:-inset-x-2 before:inset-y-0 pointer-coarse:before:-inset-x-3.5",
    track: "h-full w-(--slider-track)",
    value:
      "start-[calc(100%+0.5rem)] top-1/2 -translate-y-1/2 origin-left rtl:origin-right",
  },
} as const

type SliderValueType = number | readonly number[]

type SliderProps<Value extends SliderValueType = SliderValueType> =
  SliderPrimitive.Root.Props<Value> &
    VariantProps<typeof sliderVariants> & {
      showValue?: boolean
      draggableRange?: boolean
      getAriaLabel?: (index: number) => string
      getAriaValueText?: (
        formattedValue: string,
        value: number,
        index: number
      ) => string
    }

type RangeDrag = {
  id: number
  origin: number
  values: readonly number[]
  scale: number
  valueAt: (position: number) => number
  started: boolean
  last: number[] | null
}

function countThumbs(value: unknown) {
  return Array.isArray(value) ? Math.max(1, Math.min(value.length, 100)) : 1
}

function sameValue(a: unknown, b: unknown) {
  if (Array.isArray(a) && Array.isArray(b)) {
    return a.length === b.length && a.every((item, index) => item === b[index])
  }
  return a === b
}

function decimalsOf(value: number) {
  return Number.isFinite(value) ? (String(value).split(".")[1] ?? "").length : 0
}

function changeDetails(
  reason: "drag" | "track-press",
  event: PointerEvent,
  trigger: Element
) {
  const details = {
    reason,
    event,
    trigger,
    activeThumbIndex: -1,
    isCanceled: false,
    isPropagationAllowed: false,
    cancel() {
      details.isCanceled = true
    },
    allowPropagation() {
      details.isPropagationAllowed = true
    },
  }
  return details as SliderPrimitive.Root.ChangeEventDetails
}

function useJump(rootRef: React.RefObject<HTMLElement | null>) {
  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(
    undefined
  )
  const drags = React.useRef(0)

  React.useEffect(() => () => clearTimeout(timer.current), [])

  const stop = React.useCallback(() => {
    clearTimeout(timer.current)
    rootRef.current?.removeAttribute("data-jump")
  }, [rootRef])

  const start = React.useCallback(() => {
    const root = rootRef.current
    if (!root) {
      return
    }
    clearTimeout(timer.current)
    drags.current = 0
    root.setAttribute("data-jump", "")
    timer.current = setTimeout(stop, jumpTime + 40)
  }, [rootRef, stop])

  const drag = React.useCallback(() => {
    if (!rootRef.current?.hasAttribute("data-jump")) {
      return
    }
    drags.current += 1
    if (drags.current >= 3) {
      stop()
    }
  }, [rootRef, stop])

  return { start, drag, stop }
}

function Slider<Value extends SliderValueType>({
  className,
  children,
  size = "default",
  showValue = false,
  draggableRange = false,
  value,
  defaultValue,
  min = 0,
  max = 100,
  step = 1,
  minStepsBetweenValues = 0,
  orientation = "horizontal",
  thumbAlignment = "edge",
  locale = "en-US",
  format,
  disabled,
  onValueChange,
  onValueCommitted,
  getAriaLabel,
  getAriaValueText,
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledBy,
  ref,
  ...props
}: SliderProps<Value>) {
  const rootRef = React.useRef<HTMLDivElement | null>(null)
  const inherited = useDirection()
  const [domDirection, setDomDirection] = React.useState<TextDirection>("ltr")
  const direction = domDirection === "rtl" ? "rtl" : inherited
  const jump = useJump(rootRef)
  const controlled = value !== undefined
  const [internal, setInternal] = React.useState<SliderValueType>(
    defaultValue ?? min
  )
  const current = controlled ? value : internal
  const emitted = React.useRef<unknown>(current)
  const previous = React.useRef<unknown>(current)
  const rangeDrag = React.useRef<RangeDrag | null>(null)
  const thumbs = countThumbs(current)
  const layout = orientationClasses[orientation]
  const vertical = orientation === "vertical"
  const rangeEnabled = draggableRange && !disabled && thumbs > 1

  const formatter = React.useMemo(() => {
    try {
      return new Intl.NumberFormat(locale, format)
    } catch {
      return new Intl.NumberFormat("en-US")
    }
  }, [locale, format])

  const setRef = React.useCallback(
    (node: HTMLDivElement | null) => {
      rootRef.current = node
      if (node?.isConnected) {
        setDomDirection(
          getComputedStyle(node).direction === "rtl" ? "rtl" : "ltr"
        )
      }
      if (typeof ref === "function") {
        return ref(node)
      }
      if (ref) {
        ref.current = node
      }
      return undefined
    },
    [ref]
  )

  const blockTouchPress = React.useCallback((control: HTMLElement | null) => {
    if (!control) {
      return undefined
    }
    const onTouchStart = (event: TouchEvent) => {
      if (rangeDrag.current) {
        event.stopImmediatePropagation()
        event.stopPropagation()
      }
    }
    control.addEventListener("touchstart", onTouchStart, {
      capture: true,
      passive: true,
    })
    return () => control.removeEventListener("touchstart", onTouchStart, true)
  }, [])

  React.useLayoutEffect(() => {
    if (sameValue(current, previous.current)) {
      return
    }
    previous.current = current
    if (!sameValue(current, emitted.current)) {
      jump.start()
    }
  }, [current, jump])

  const handleValueChange = (
    next: number | readonly number[],
    details: SliderPrimitive.Root.ChangeEventDetails
  ) => {
    onValueChange?.(next as never, details)
    if (details.isCanceled) {
      return false
    }
    emitted.current = next
    if (!controlled) {
      setInternal(next)
    }
    if (details.reason === "drag") {
      jump.drag()
    } else {
      jump.start()
    }
    return true
  }

  const axisOf = (event: { clientX: number; clientY: number }) =>
    vertical ? event.clientY : event.clientX

  const startRangeDrag = (event: React.PointerEvent<HTMLDivElement>) => {
    if (
      !rangeEnabled ||
      event.button !== 0 ||
      !Array.isArray(current) ||
      !(event.target instanceof Element) ||
      event.target.closest("[data-slot=slider-thumb]")
    ) {
      return
    }
    const control = event.currentTarget
    const handles = control.querySelectorAll<HTMLElement>(
      "[data-slot=slider-thumb]"
    )
    const first = handles[0]?.getBoundingClientRect()
    const last = handles[handles.length - 1]?.getBoundingClientRect()
    if (!first || !last) {
      return
    }
    const thumbSize = vertical ? first.height : first.width
    const centers = [first, last].map((rect) =>
      vertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2
    )
    const position = axisOf(event)
    if (
      position <= Math.min(...centers) + thumbSize / 2 ||
      position >= Math.max(...centers) - thumbSize / 2
    ) {
      return
    }
    const rect = control.getBoundingClientRect()
    const inset = thumbAlignment === "center" ? 0 : thumbSize
    const length = (vertical ? rect.height : rect.width) - inset
    if (length <= 0 || max <= min) {
      return
    }
    event.preventDefault()
    const sign = vertical || direction === "rtl" ? -1 : 1
    const startEdge = vertical
      ? rect.bottom
      : direction === "rtl"
        ? rect.right
        : rect.left
    control.setPointerCapture?.(event.pointerId)
    rangeDrag.current = {
      id: event.pointerId,
      origin: position,
      values: current,
      scale: ((max - min) / length) * sign,
      valueAt: (at) =>
        min +
        Math.min(
          1,
          Math.max(0, ((at - startEdge) * sign - inset / 2) / length)
        ) *
          (max - min),
      started: false,
      last: null,
    }
  }

  const moveRange = (event: React.PointerEvent<HTMLDivElement>) => {
    const state = rangeDrag.current
    if (!state || event.pointerId !== state.id) {
      return
    }
    const distance = axisOf(event) - state.origin
    if (!state.started) {
      if (Math.abs(distance) < 3) {
        return
      }
      state.started = true
      jump.stop()
      rootRef.current?.setAttribute("data-range-dragging", "")
    }
    const values = state.values
    const precision = Math.max(decimalsOf(step), decimalsOf(min))
    const snapped = Math.round((distance * state.scale) / step) * step
    const delta = Math.min(
      max - values[values.length - 1],
      Math.max(min - values[0], snapped)
    )
    const next = values.map((item) => Number((item + delta).toFixed(precision)))
    if (sameValue(next, state.last ?? values)) {
      return
    }
    if (
      handleValueChange(
        next,
        changeDetails("drag", event.nativeEvent, event.currentTarget)
      )
    ) {
      state.last = next
    }
  }

  const endRange = (event: React.PointerEvent<HTMLDivElement>) => {
    const state = rangeDrag.current
    if (!state || event.pointerId !== state.id) {
      return
    }
    rangeDrag.current = null
    rootRef.current?.removeAttribute("data-range-dragging")
    const control = event.currentTarget
    if (control.hasPointerCapture?.(event.pointerId)) {
      control.releasePointerCapture(event.pointerId)
    }
    if (state.started) {
      if (state.last) {
        onValueCommitted?.(state.last as never, {
          reason: "drag",
          event: event.nativeEvent,
        })
      }
      return
    }
    if (event.type !== "pointerup") {
      return
    }
    const values = state.values
    const precision = Math.max(decimalsOf(step), decimalsOf(min))
    const raw =
      min + Math.round((state.valueAt(axisOf(event)) - min) / step) * step
    let index = 0
    values.forEach((item, i) => {
      if (Math.abs(item - raw) <= Math.abs(values[index] - raw)) {
        index = i
      }
    })
    const gap = minStepsBetweenValues * step
    const floor = index > 0 ? values[index - 1] + gap : min
    const ceiling = index < values.length - 1 ? values[index + 1] - gap : max
    const target = Number(
      Math.min(ceiling, Math.max(floor, raw)).toFixed(precision)
    )
    const next = values.map((item, i) => (i === index ? target : item))
    control
      .querySelectorAll<HTMLElement>("[data-slot=slider-thumb]")
      [index]?.querySelector("input")
      ?.focus({ preventScroll: true, focusVisible: false } as FocusOptions)
    if (
      !sameValue(next, values) &&
      handleValueChange(
        next,
        changeDetails("track-press", event.nativeEvent, control)
      )
    ) {
      onValueCommitted?.(next as never, {
        reason: "track-press",
        event: event.nativeEvent,
      })
    }
  }

  return (
    <DirectionProvider direction={direction}>
      <SliderPrimitive.Root
        ref={setRef}
        value={current as Value}
        min={min}
        max={max}
        step={step}
        minStepsBetweenValues={minStepsBetweenValues}
        orientation={orientation}
        thumbAlignment={thumbAlignment}
        locale={locale}
        format={format}
        disabled={disabled}
        onValueChange={handleValueChange}
        onValueCommitted={onValueCommitted}
        data-size={size}
        className={mergeClassName(
          cn(sliderVariants({ size }), layout.root),
          className
        )}
        {...props}
        data-slot="slider"
      >
        {children}
        <SliderPrimitive.Control
          ref={rangeEnabled ? blockTouchPress : undefined}
          data-slot="slider-control"
          onPointerDown={rangeEnabled ? startRangeDrag : undefined}
          onPointerMove={rangeEnabled ? moveRange : undefined}
          onPointerUp={rangeEnabled ? endRange : undefined}
          onPointerCancel={rangeEnabled ? endRange : undefined}
          className={cn(
            "relative flex cursor-pointer touch-none items-center select-none [-webkit-tap-highlight-color:transparent] group-data-dragging/slider:cursor-grabbing group-data-range-dragging/slider:cursor-grabbing before:absolute data-disabled:cursor-not-allowed",
            layout.control
          )}
        >
          <SliderPrimitive.Track
            data-slot="slider-track"
            className={cn(
              "relative grow overflow-hidden rounded-full bg-foreground/10 select-none dark:bg-foreground/15 forced-colors:border",
              layout.track
            )}
          >
            <SliderPrimitive.Indicator
              data-slot="slider-range"
              className={cn(
                "bg-primary select-none motion-safe:group-data-jump/slider:transition-[width,height,left,right,bottom] motion-safe:group-data-jump/slider:duration-180 motion-safe:group-data-jump/slider:ease-out-quint forced-colors:bg-highlight",
                rangeEnabled &&
                  "cursor-grab group-data-range-dragging/slider:cursor-grabbing"
              )}
            />
          </SliderPrimitive.Track>
          {Array.from({ length: thumbs }, (_, index) => (
            <SliderPrimitive.Thumb
              key={index}
              index={index}
              aria-label={ariaLabel}
              aria-labelledby={ariaLabelledBy}
              getAriaLabel={getAriaLabel}
              getAriaValueText={getAriaValueText}
              data-slot="slider-thumb"
              className="group/slider-thumb relative block size-(--slider-thumb) shrink-0 cursor-grab rounded-full border border-foreground/20 bg-background bg-clip-padding transition-[box-shadow,border-color] duration-150 ease-out-quint outline-none select-none group-data-dragging/slider:cursor-grabbing group-data-range-dragging/slider:ring-6 group-data-range-dragging/slider:ring-foreground/8 after:absolute after:-inset-1.5 hover:ring-4 hover:ring-foreground/6 focus-visible:outline-hidden has-[:focus-visible]:border-ring has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-focus-ring data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 motion-safe:group-data-jump/slider:transition-[box-shadow,border-color,left,right,bottom] motion-safe:group-data-jump/slider:duration-[150ms,150ms,180ms,180ms,180ms] dark:border-background/60 dark:bg-foreground dark:group-data-range-dragging/slider:ring-foreground/15 dark:hover:ring-foreground/10 dark:data-invalid:ring-destructive/40 pointer-coarse:after:-inset-3.5 data-disabled:cursor-not-allowed data-disabled:hover:ring-0 group-data-dragging/slider:data-active:ring-6 group-data-dragging/slider:data-active:ring-foreground/8 dark:group-data-dragging/slider:data-active:ring-foreground/15"
              render={(thumbProps, state) => (
                <div
                  {...thumbProps}
                  data-active={
                    state.activeThumbIndex === index ? "" : undefined
                  }
                >
                  {showValue ? (
                    <span
                      aria-hidden="true"
                      dir="auto"
                      data-slot="slider-thumb-value"
                      className={cn(
                        "pointer-events-none absolute rounded-md bg-foreground px-1.5 py-0.5 text-xs/4 font-medium whitespace-nowrap text-background tabular-nums opacity-0 shadow-md/10 transition-[opacity,scale] duration-100 ease-out-quint group-has-[:focus-visible]/slider-thumb:opacity-100 group-has-[:focus-visible]/slider-thumb:duration-150 group-data-range-dragging/slider:opacity-100 group-data-range-dragging/slider:duration-150 group-data-dragging/slider:group-data-active/slider-thumb:opacity-100 group-data-dragging/slider:group-data-active/slider-thumb:duration-150 motion-safe:scale-96 motion-safe:group-has-[:focus-visible]/slider-thumb:scale-100 motion-safe:group-data-range-dragging/slider:scale-100 motion-safe:group-data-dragging/slider:group-data-active/slider-thumb:scale-100",
                        layout.value
                      )}
                    >
                      {Number.isFinite(state.values[index])
                        ? formatter.format(state.values[index])
                        : null}
                    </span>
                  ) : null}
                  {thumbProps.children}
                </div>
              )}
            />
          ))}
        </SliderPrimitive.Control>
      </SliderPrimitive.Root>
    </DirectionProvider>
  )
}

function SliderLabel({ className, ...props }: SliderPrimitive.Label.Props) {
  return (
    <SliderPrimitive.Label
      data-slot="slider-label"
      className={mergeClassName(
        "min-w-0 flex-1 text-sm font-medium wrap-anywhere select-none",
        className
      )}
      {...props}
    />
  )
}

function SliderValue({ className, ...props }: SliderPrimitive.Value.Props) {
  return (
    <SliderPrimitive.Value
      data-slot="slider-value"
      className={mergeClassName(
        "ms-auto shrink-0 text-sm text-muted-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export { Slider, SliderLabel, SliderValue, sliderVariants }
export type { SliderProps }

Update the import paths to match your project setup.

Usage

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

<Slider defaultValue={[50]} max={100} step={1} aria-label="Volume" />

<Slider defaultValue={50}>
  <SliderLabel>Volume</SliderLabel>
  <SliderValue />
</Slider>

<Slider /> draws one thumb per value, so a number or a one-item array makes a single slider and two items make a range. Children such as <SliderLabel /> and <SliderValue /> sit on one line above the track.

While you drag, the thumb follows the pointer exactly. When the value jumps, from a press on the track, a key or a new controlled value, the thumb and fill glide there in 180ms instead of teleporting.

Composition

Slider
├── SliderLabel
└── SliderValue

Examples

Sizes

sm, default and lg scale the thumb and track together.

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

export function SliderSizes() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-8">
      <Slider size="sm" defaultValue={25} aria-label="Small" />
      <Slider defaultValue={50} aria-label="Default" />
      <Slider size="lg" defaultValue={75} aria-label="Large" />
    </div>
  )
}

Range

Pass two values for a range. Name each thumb with getAriaLabel, and keep them apart with minStepsBetweenValues. With draggableRange, drag anywhere between the thumbs to move both at once; a tap there still moves the nearest thumb.

Price

$200 – $800

"use client"

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

export function SliderRange() {
  return (
    <Slider
      defaultValue={[200, 800]}
      max={1000}
      step={10}
      minStepsBetweenValues={10}
      draggableRange
      format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
      getAriaLabel={(index) =>
        index === 0 ? "Minimum price" : "Maximum price"
      }
      className="max-w-xs"
    >
      <SliderLabel>Price</SliderLabel>
      <SliderValue />
    </Slider>
  )
}

Value bubble

showValue shows the formatted value above the thumb while it is dragged or focused from the keyboard. Use it instead of a label row, since the bubble rises into the space above the track.

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

export function SliderValueBubble() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-10 pt-8">
      <Slider
        defaultValue={0.4}
        max={1}
        step={0.01}
        format={{ style: "percent" }}
        showValue
        aria-label="Opacity"
      />
      <Slider defaultValue={[30, 70]} showValue aria-label="Range" />
    </div>
  )
}

Steps and format

step snaps the value, largeStep sets the Page Up and Shift + arrow jump, and format formats every number the slider shows or announces.

Playback speed

1.00

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

export function SliderSteps() {
  return (
    <Slider
      defaultValue={1}
      min={0.5}
      max={2}
      step={0.25}
      largeStep={0.5}
      format={{ minimumFractionDigits: 2 }}
      className="max-w-xs"
    >
      <SliderLabel>Playback speed</SliderLabel>
      <SliderValue />
    </Slider>
  )
}

Controlled

onValueChange fires on every move and onValueCommitted once on release, which is the moment to save. Setting the value from outside glides too.

Brightness

Saved: 40

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Slider, SliderLabel, SliderValue } from "@/components/ui/slider"

export function SliderControlled() {
  const [value, setValue] = React.useState(40)
  const [saved, setSaved] = React.useState(40)

  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Slider
        value={value}
        onValueChange={setValue}
        onValueCommitted={setSaved}
      >
        <SliderLabel>Brightness</SliderLabel>
        <SliderValue />
      </Slider>
      <div className="flex items-center justify-between gap-3">
        <span className="text-sm text-muted-foreground">Saved: {saved}</span>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" onClick={() => setValue(0)}>
            Off
          </Button>
          <Button variant="outline" size="sm" onClick={() => setValue(100)}>
            Max
          </Button>
        </div>
      </div>
    </div>
  )
}

Vertical

With orientation="vertical" the slider fills its parent's height, and Up raises the value.

60 Hz

250 Hz

1 kHz

4 kHz

16 kHz

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

const bands = [
  { label: "60 Hz", value: 70 },
  { label: "250 Hz", value: 45 },
  { label: "1 kHz", value: 55 },
  { label: "4 kHz", value: 80 },
  { label: "16 kHz", value: 35 },
]

export function SliderVertical() {
  return (
    <div className="flex h-48 gap-6">
      {bands.map((band) => (
        <div key={band.label} className="flex flex-col items-center gap-3">
          <Slider
            orientation="vertical"
            defaultValue={band.value}
            aria-label={band.label}
          />
          <span className="text-xs text-muted-foreground tabular-nums">
            {band.label}
          </span>
        </div>
      ))}
    </div>
  )
}

With icons

Place icons beside the slider in a flex row. The slider takes the remaining width.

import { IconVolume, IconVolume3 } from "@tabler/icons-react"

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

export function SliderIcons() {
  return (
    <div className="flex w-full max-w-xs items-center gap-3 text-muted-foreground">
      <IconVolume3 className="size-4 shrink-0" aria-hidden />
      <Slider defaultValue={50} aria-label="Volume" />
      <IconVolume className="size-4 shrink-0" aria-hidden />
    </div>
  )
}

Disabled

The whole slider dims and ignores pointer and keyboard input.

Bass boost

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

export function SliderDisabled() {
  return (
    <Slider defaultValue={30} disabled className="max-w-xs">
      <SliderLabel>Bass boost</SliderLabel>
      <SliderValue />
    </Slider>
  )
}

Long labels

Long labels wrap, and the value stays on the end.

Annual household income before taxes, including side projects

$1,200 – $48,000

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

export function SliderLongLabel() {
  return (
    <Slider
      defaultValue={[1200, 48000]}
      min={0}
      max={50000}
      step={100}
      format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
      className="max-w-xs"
    >
      <SliderLabel>
        Annual household income before taxes, including side projects
      </SliderLabel>
      <SliderValue />
    </Slider>
  )
}

Right to left

Inside a right-to-left parent the fill starts from the right and the arrow keys follow it. Pass locale for the reader's digits.

مستوى الصوت

٦٥

النطاق

٢٠ – ٧٠

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

export function SliderRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-xs flex-col gap-8">
      <Slider defaultValue={65} locale="ar-EG">
        <SliderLabel>مستوى الصوت</SliderLabel>
        <SliderValue />
      </Slider>
      <Slider defaultValue={[20, 70]} locale="ar-EG" draggableRange>
        <SliderLabel>النطاق</SliderLabel>
        <SliderValue />
      </Slider>
    </div>
  )
}

Keyboard

Key	Action
`Tab`	Moves focus to the next thumb.
`→↑`	Increases the value by one step. → decreases it in right-to-left.
`←↓`	Decreases the value by one step. ← increases it in right-to-left.
`Shift + ArrowPage UpPage Down`	Moves by largeStep.
`Home`	Sets the minimum, or the previous thumb's value in a range.
`End`	Sets the maximum, or the next thumb's value in a range.

Accessibility

Each thumb holds a native input type="range", so it is a slider with its own value, min and max.
<SliderLabel /> names every thumb. Without one, aria-label on <Slider /> is passed to the thumbs, not the wrapper, so the slider is never left unnamed. In a range, use getAriaLabel to tell the thumbs apart.
<SliderValue /> and the value bubble are not announced on every change; the thumb already reports its value.
Pressing a thumb doesn't show a focus ring; the arrow keys do. With reduced motion the thumb jumps instead of gliding.
On touch screens the hit area grows to at least 44px without changing the layout.

API reference

Built on the Base UI slider. Every part accepts the props of the primitive it wraps.

Slider

Prop	Type	Default
`value`The controlled value. One thumb per item.	`number \| number[]`	`–`
`defaultValue`	`number \| number[]`	`–`
`onValueChange`Fires on every change while dragging.	`(value, eventDetails) => void`	`–`
`onValueCommitted`Fires once when a change ends.	`(value, eventDetails) => void`	`–`
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`largeStep`	`number`	`10`
`minStepsBetweenValues`	`number`	`0`
`size`	`"sm" \| "default" \| "lg"`	`"default"`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`draggableRange`In a range, dragging between the thumbs moves them together, keeping the gap.	`boolean`	`false`
`showValue`Shows the value above the thumb while dragging or keyboard-focused.	`boolean`	`false`
`thumbAlignment`edge keeps the thumb inside the track at min and max.	`"edge" \| "center" \| "edge-client-only"`	`"edge"`
`thumbCollisionBehavior`	`"push" \| "swap" \| "none"`	`"push"`
`format`	`Intl.NumberFormatOptions`	`–`
`locale`	`Intl.LocalesArgument`	`"en-US"`
`aria-label`Names the thumbs.	`string`	`–`
`getAriaLabel`Names each thumb of a range.	`(index: number) => string`	`–`
`getAriaValueText`	`(formattedValue: string, value: number, index: number) => string`	`–`
`name`	`string`	`–`
`disabled`	`boolean`	`false`
`className`	`string \| (state) => string`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Attribute	Description
`data-slot="slider"`	The root.
`data-size`	sm, default or lg.
`data-jump`	Present for 220ms while the thumb glides to a new value.
`data-range-dragging`	Present while the whole range is being dragged.
`data-orientation`	horizontal or vertical.
`data-dragging`	Present while a pointer is down.
`data-disabled`	Present when disabled.
`data-invalid`	Present when invalid inside a Field.
`--slider-thumb`	The thumb's diameter, set by size.
`--slider-track`	The track's thickness, set by size.
`data-slot="slider-control"`	The pressable area around the track.
`data-slot="slider-track"`	The track.
`data-slot="slider-range"`	The fill between the start, or the first thumb, and the last thumb.
`data-slot="slider-thumb"`	Each thumb. data-index gives its position.
`data-active`	On the thumb that is focused or being dragged.
`data-slot="slider-thumb-value"`	The value bubble from showValue.

SliderLabel

Names the thumbs and grows to fill the row. Renders a <div>.

Prop	Type	Default
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Attribute	Description
`data-slot="slider-label"`	The label.

SliderValue

Shows the formatted values, joined with an en dash in a range. Renders an <output>.

Prop	Type	Default
`children`Custom text.	`(formattedValues: string[], values: number[]) => ReactNode`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<output>`

Attribute	Description
`data-slot="slider-value"`	The value.
`data-orientation`	horizontal or vertical.
`data-dragging`	Present while a pointer is down.
`data-disabled`	Present when disabled.
`data-invalid`	Present when invalid inside a Field.