How to create Custom Range Slider in html

What is range slider in html?

Range slider is input elements of type range. It can increase range value and decrease between 0 to 100 value. Input type range has attribute min, max, value, step and also have a list. List not supported for the all browser now only supported in chrome. Range slider we can create custom with the help of the CSS. Range slider we use for the variable value as we need to adjust volume, color, game controlling and as your requirement. As image preview below:

 

<style>

.anythingSliderMain {

  max-width: 600px;

  margin: 20px auto;

}

.anythingRangeSlider {

  -webkit-appearance: none;

  appearance: none;

  width: 100%;

  height: 10px;

  background: #0bf;

  outline: none;

}

.anythingRangeSlider::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  border-radius:50%;

  background: #0b6;

  height: 30px;

  width: 30px;

}

.anythingRangeSlider::-moz-range-thumb {

  width: 25px;

  height: 25px;

  background: #0b6;

}

.anythingRangeSlider::-webkit-slider-thumb:active{

 background: #084;

}

</style>

<div class="anythingSliderMain">

  <p>Default slider</p>

  <input type="range" min="1" max="100" value="70" step="10">

 

  <p>Custom Range slider</p>

  <input type="range" min="1" max="100" value="30" step="10" class="anythingRangeSlider">

<br><br>

<input type="range" min="1" max="100" list="tickbars">

<datalist id="tickbars">

  <option value="0" label="0%">

  <option value="10">

  <option value="20" label="20%">

  <option value="30">

  <option value="40" label="4%">

  <option value="50">

  <option value="60" label="60%">

  <option value="70">

  <option value="80" label="80%">

  <option value="90">

  <option value="100" label="100%">

</datalist>

</div>