Slider

An input where the user selects a value or range from within a given range, with full keyboard, touch, and RTL support.

Default

The slider renders one thumb per entry in value or defaultValue.

tsx

import { Slider } from "@hummingbirdui/react";

export default function SliderDefault() {
  return (
    <Slider
      defaultValue={[50]}
      aria-label="Volume"
      className="mx-auto max-w-sm"
    />
  );
}

Range

Multiple values create a range slider; minStepsBetweenThumbs keeps the thumbs from overlapping.

tsx

import { Slider } from "@hummingbirdui/react";

export default function SliderRange() {
  return (
    <Slider
      defaultValue={[25, 75]}
      minStepsBetweenThumbs={10}
      aria-label="Price range"
      className="mx-auto max-w-sm"
    />
  );
}

Colors

The color prop switches the slider's color scheme.

tsx

import { Slider } from "@hummingbirdui/react";

const colors = [
  "primary",
  "secondary",
  "info",
  "success",
  "warning",
  "danger",
  "neutral",
] as const;

export default function SliderColors() {
  return (
    <div className="mx-auto flex max-w-sm flex-col gap-4">
      {colors.map((color) => (
        <Slider
          key={color}
          color={color}
          defaultValue={[50]}
          aria-label={`${color} slider`}
        />
      ))}
    </div>
  );
}

Sizes

The size prop scales the track and thumb.

tsx

import { Slider } from "@hummingbirdui/react";

export default function SliderSizes() {
  return (
    <div className="mx-auto flex max-w-sm flex-col gap-4">
      <Slider size="sm" defaultValue={[50]} aria-label="Small slider" />
      <Slider defaultValue={[50]} aria-label="Default slider" />
      <Slider size="lg" defaultValue={[50]} aria-label="Large slider" />
    </div>
  );
}

Vertical

orientation="vertical" renders a vertical slider; the height comes from the container.

tsx

import { Slider } from "@hummingbirdui/react";

export default function SliderVertical() {
  return (
    <div className="flex h-56 justify-center gap-10">
      <Slider
        orientation="vertical"
        defaultValue={[50]}
        aria-label="Volume"
      />
      <Slider
        orientation="vertical"
        defaultValue={[25, 75]}
        color="success"
        aria-label="Range"
      />
    </div>
  );
}

Controlled

value with onValueChange controls the slider, for displaying or syncing the current value.

Budget$250

tsx

import * as React from "react";
import { Slider } from "@hummingbirdui/react";

export default function SliderControlled() {
  const [value, setValue] = React.useState([250]);

  return (
    <div className="mx-auto max-w-sm">
      <div className="mb-2 flex items-center justify-between text-sm">
        <span className="font-medium">Budget</span>
        <span className="text-muted">${value[0]}</span>
      </div>
      <Slider
        value={value}
        onValueChange={setValue}
        max={500}
        step={10}
        aria-label="Budget"
      />
    </div>
  );
}

Disabled

The disabled prop prevents interaction and mutes the colors.

tsx

import { Slider } from "@hummingbirdui/react";

export default function SliderDisabled() {
  return (
    <Slider
      defaultValue={[50]}
      disabled
      aria-label="Disabled slider"
      className="mx-auto max-w-sm"
    />
  );
}

API Reference

Built on the Radix UI Slider primitive. All props are forwarded to the Radix root.

Slider

Prop	Type	Default
`defaultValue`	`number[]`	—
`value`	`number[]`	—
`onValueChange`	`function`	—
`onValueCommit`	`function`	—
`color`	`enum`	`"primary"`
`size`	`enum`	`"md"`
`name`	`string`	—
`disabled`	`boolean`	`false`
`orientation`	`enum`	`"horizontal"`
`dir`	`enum`	—
`inverted`	`boolean`	`false`
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`minStepsBetweenThumbs`	`number`	`0`
`form`	`string`	—
`className`	`string`	—

Data attribute	Values
`[data-disabled]`	Present when disabled
`[data-orientation]`	`vertical \| horizontal`

Keyboard Interactions

The slider follows the WAI-ARIA slider pattern: arrow keys move the focused thumb by a step, Page Up/Page Down move by larger steps, and Home/End jump to the minimum and maximum.

Styling

The slider component utilizes several CSS variables for customization, defined on the root's slider class. The track tint is derived from --slider-color automatically.

.slider {
  --slider-color: var(--color-primary);
  --slider-height: --spacing(6);
  --slider-thumb-width: --spacing(5);
  --slider-thumb-height: --spacing(5);
  --slider-thumb-border-radius: calc(infinity * 1px);
  --slider-thumb-box-shadow: --alpha(var(--slider-color) / 16%) 0px 0px 0px 8px;
  --slider-track-height: --spacing(1.5);
  --slider-track-border-radius: var(--radius-sm);
}

PreviousRange NextFile Uploader