5

I have a simple HTML Range Slider. Min value is 0 Max is 30. I want to put labels under the slider but only every 5.

Code is shown below and demo page is here - https://premiecheck-omzetgarant.nl/CalcTool/test.html

<div class="slidecontainer">
  <input type="range" min="0" max="30" value="0" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>
Mike Dray
  • 133
  • 1
  • 1
  • 9

2 Answers2

12

You can use a datalist 

datalist {
  display: flex;
  justify-content: space-between;
  color: red;
  width: 50%;
}

input {
  width: 50%;
}
<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="5"></option>
  <option value="60"></option>
  <option value="70"></option>
  <option value="80"></option>
  <option value="90"></option>
  <option value="100" label="10"></option>
</datalist>
Gerard
  • 15,418
  • 5
  • 30
  • 52
-1

You can do it by adding the step attribute in your input :

<input type="range" min="0" max="30" value="0" class="slider" id="myRange" step="5">

With Javascript

If you want to display the value, but only every 5. You can check in Javascrit if the current value is divisible by 5 and then display it :

slider.oninput = function() {
  if(this.value%5 == 0){
     output.innerHTML = this.value;
  }

}
Thomas Lamothe
  • 174
  • 1
  • 9
  • thanks but this steps up in 5's I want the value to be able to increase by 1 but only to have a label every 5 – Mike Dray Apr 14 '20 at 09:48
  • I didn't understand that way : just check in javascript if the value of the input is divisible by 5 and then print : https://codepen.io/thomas-lamothe/pen/GRppNzg – Thomas Lamothe Apr 14 '20 at 09:50