Slider

Usage

Single Value Slider

20%

Range Slider

30%

70%

import Slider from "@repo/ui/Slider";
import { useState } from "react";

const [value, setValue] = useState(20);
const [range, setRange] = useState([30, 70]);

<Slider
  value={singleValue}
  onChange={(value) => setValue(value as number)}
/>

<Slider
  range
  value={rangeValue}
  onChange={(value) => setRange(value as [number, number])}
/>

Installation

npx the-dig@latest add Slider

Props

All rc-slider props are forwarded. A single slider uses number; range uses number[]. This wrapper replaces handleRender with an always-visible rounded percentage label, so custom handle rendering is not currently supported.

Prop	Type	Default
className	string	-

GitHub

NPM