Slider

Slider's are another way to get Users input on a property which can take up a range of values. These are usually seen in E-Commerce apps to filter products based on price ranges and in Multimedia apps to control playback volume.

Price Range:


<label for="priceRange">Price Range:</label>
<input type="range" min="0" max="10000" step="2500" list="tickmarks" class="slider">
<datalist id="tickmarks" class="flex justify-between">
  <option value="0" label="0"></option>
  <option value="2500">2.5K</option>
  <option value="5000" label="5K"></option>
  <option value="7500">7.5K</option>
  <option value="10000" label="10K"></option>
</datalist>