Slider

The Slider component enables users to easily adjust numerical values within a defined range by dragging a handle along a track, offering a visual and interactive input method for applications

Basic

Result:

Code

// State variable sliderValue
const [sliderValue, setSliderValue] = useState<number>(0);
.
. 
.<Slider onChange={(value)=>{
    setSliderValue(value);
}} min={0} initialValue={0}/>
.
. 
<p className="text-blue-500 dark:text-green-400">{sliderValue}</p>

Customization

You can customize it such as setting the track color for dark and light mode, the color of the thumb, the range width, the step (e.g. a step of 5) etc

Result:

Code

// State variable sliderValue
const [sliderValue, setSliderValue] = useState<number>(0);
.
. 
.
<Slider rangeWidth="50%" step={5} id="ShorterSlider" onChange={(value)=>{
    setSliderValue(value);
}} min={0} initialValue={0} darkTrackColor="#569" lightTrackColor="#097"
thumbColor="#F80"
/>
.
. 
<p className="text-blue-500 dark:text-green-400">{sliderValue}</p>