Forms

Slider

Pick a value or a range.

Import

tsx

import { Slider } from "@cronus-ui/ui";

bash

npx cronus-ui add slider

Examples

Single thumb

A controlled single-value slider.

Volume40%

tsx

function SliderDemo() {
  const [volume, setVolume] = useState([40]);

  return (
    <div className="flex flex-col gap-4 max-w-xs">
      <div className="flex items-center justify-between text-sm">
        <Label>Volume</Label>
        <span className="font-mono text-fg">{volume[0]}%</span>
      </div>
      <Slider
        aria-label="Volume"
        value={volume}
        onValueChange={setVolume}
        min={0}
        max={100}
        step={1}
      />
    </div>
  );
}

Range

A two-thumb slider bound to a [min, max] tuple.

Price range$20 – $80

tsx

function SliderRangeDemo() {
  const [price, setPrice] = useState([20, 80]);

  return (
    <div className="flex flex-col gap-4 max-w-xs">
      <div className="flex items-center justify-between text-sm">
        <Label>Price range</Label>
        <span className="font-mono text-fg">
          ${price[0]} – ${price[1]}
        </span>
      </div>
      <Slider
        aria-label="Price range"
        value={price}
        onValueChange={setPrice}
        min={0}
        max={100}
        step={5}
      />
    </div>
  );
}