Slider
An input component that allows users to select values within a range
Usage
import { Slider } from "#/ui/components/Slider"<Slider /><Slider />Min/Max
You can set the min and max values of the slider using the min and max props.
<Slider />(As we don’t display the value anywhere right now, the only way we can check this works is by seeing the increased gaps between each step)
Controlled
Requires JS
We can manage the state of the slider from outside the component by passing in the value and onChange props.
export const ControlledSlider = () => {
const [value, setValue] = useState(20)
return (
<Slider
min={0}
max={100}
value={value}
onChange={(e) => setValue(parseInt(e.target.value))}
/>
)
}