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

Inherits properties from HTMLElement.

Prop	Type	Default
asChild	boolean	false
defaultValue	number[]
disabled	boolean
inverted	boolean	false
max	number	100
min	number	0
minStepsBetweenThumbs	number	0
name	string
onValueChange	(value: number[]) => void
onValueCommit	(value: number[]) => void
orientation	"horizontal""vertical"	"horizontal"
step	number	1
value	number[]