Slider
Slider component is used to allow users to make selections from a range of values. It is ideal for adjusting settings such as volume, brightness, or price on shopping sites. In order to only use the Slider Component from Cascade UI in your project, copy and paste the below code in the head tag of your html document.
<link rel="stylesheet" href="https://cascadeui-robust.netlify.app/css/foundation.css" />
<link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/Slider/slider.css" />
<div class="slider-container">
<label for="range" class="lightbold"> Slider: </label>
<input class="slider" list="slider-range" type="range"
name="range" id="range" min="0" max="100" value="30">
<datalist id="slider-range">
<option value="0"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option value="50"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option value="100"></option>
</datalist>
</div>