Forms

Slider

Pick a value or a range.

Import

tsx

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

bash

npx cooud-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 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 value={price} onValueChange={setPrice} min={0} max={100} step={5} />
    </div>
  );
}