Slider
An input where the user selects a value from within a given range.
Usage
Slidercomponent takes indefaultValue,max,stepprops.- Note that both
valueprop anddefaultValueprop take in value as array of single number - You can also pass
valueprop in conjunction withonValueChangeprop to make use of value generated by Slider. - This can be accomplished using
useStateanduseEffect
Interface for SliderProps
interface SliderProps {
defaultValue?: number[];
max: number;
step?: number;
value?: number[];
onValueChange?: (value: number[]) => void;
}Example of using value generated by Slider
import { Slider } from ".dubsui";
import { useState, useEffect } from "react";
const Primary = () => {
const [value, setValue] = useState([33]); //value is 33 but passed as array
useEffect(() => {
console.log(value);
}, [value]);
return (
<Slider
value={value}
onValueChange={setValue}
//Default value is 33 but passed as array
defaultValue={[33]}
max={100}
step={1}
/>
);
};