Slider

Usage

By default, <Slider> will display an uncontrolled input allowing a user to select a value between 0 (default) and 100. The value can be changed by dragging the thumb, clicking on the slider bar, or using arrow keys. You can initialize the starting value by passing in defaultValue.

Note

The value props for <Slider> (defaultValue, onValueChange, onValueCommit, and value) all take an array of numbers—not a single value—in order to support range sliders. If setting a single value, pass in a single-item array.

import { Slider } from "stylus-ui/Slider";

export default () => <Slider defaultValue={[25]} />;

Controlled state

To control the value of the slider, set value and onValueChange.

Note

onValueCommit is called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.

Caution

Do not set defaultValue when using a component in its controlled state.

Value: 25Commit Value: 25

import { Slider } from "stylus-ui/Slider";
import { useState } from "react";

export default () => {
  const [value, setValue] = useState([25]);
  const [commitValue, setCommitValue] = useState(value); // For example only

  return (
    <div className="flex w-full flex-col gap-4">
      <Slider
        value={value}
        onValueChange={setValue}
        onValueCommit={setCommitValue}
      />
      <div className="flex flex-col items-end font-mono text-sm text-slate-600">
        <span>{`Value: ${value}`}</span>
        <span>{`Commit Value: ${commitValue}`}</span>
      </div>
    </div>
  );
};

Range

Provide multiple values to create a range slider.

import { Slider } from "stylus-ui/Slider";

export default () => {
  return <Slider defaultValue={[25, 75]} />;
};

Optionally, you can set a minimum step distance between the two selected values by passing minStepsBetweenThumbs.

import { Slider } from "stylus-ui/Slider";

export default () => {
  return <Slider defaultValue={[25, 75]} minStepsBetweenThumbs={5} />;
};

Vertical

To display a vertical slider, pass orientation="vertical". The slider will expand to fill the height of its parent.

import { Slider } from "stylus-ui/Slider";

export default () => {
  return (
    <div className="h-40">
      <Slider defaultValue={[75]} orientation="vertical" />
    </div>
  );
};

Disabled

Sliders can be rendered non-interactive by setting the disabled prop.

import { Slider } from "stylus-ui/Slider";

export default () => <Slider value={[25]} disabled />;

API Reference

Slider

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

asChild

boolean

---

defaultValue

number[]

---

dir

"ltr" | "rtl"

---

disabled

boolean

---

form

string

---

inverted

boolean

---

max

number

---

min

number

---

minStepsBetweenThumbs

number

---

name

string

---

onValueChange

(value: number[]) => void

---

onValueCommit

(value: number[]) => void

---

orientation

"horizontal" | "vertical" = "horizontal"

---

step

number

---

value

number[]

---