HTML

range html

<!--This is code for a default range slider in HTML5.  -->
<input type="range" min="1" max="100" value="50">
<!--Where the min and max attributes are the min and max of the range -->
<!--The value is a number (never empty) that represents the current value of the range.
<!--Default value is 50.-->
  
<input type="range" min="1" max="100" value="50" step="10">
<!--In this example, the step attribute determines a fixed interval-->
<!--between each value. Can be decimal.-->
  
<!--Instead of being able to select 1,2...99,100 you could only 
<!--select 0,10...90,100-->

range slider in html

<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="0%"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
  <option value="40"></option>
  <option value="50" label="50%"></option>
  <option value="60"></option>
  <option value="70"></option>
  <option value="80"></option>
  <option value="90"></option>
  <option value="100" label="100%"></option>
</datalist>