Slider
A control element that allows for a range of selections.
Usage
import { Slider, type SliderProps } from '@tacos-ui/react';
export const Demo = (props: SliderProps) => {
return (
<Slider
marks={[
{ value: 25, label: '25' },
{ value: 50, label: '50' },
{ value: 75, label: '75' },
]}
value={[33]}
{...props}
/>
);
};
Examples
Range Slider
To use the slider as a range slider, you need to provide an array of values.
<Slider value={[33, 66]}>Label</Slider>Unlabeled
The slider can also be used without a label while still showing indicators within the track.
<Slider
defaultValue={[33]}
marks={[{ value: 0 }, { value: 25 }, { value: 50 }, { value: 75 }, { value: 100 }]}
/>