CODEWITHSUNDEEP
htmlcss
Mike Dray
Mike Dray

Reputation: 155

HTMl Range Slider With Labels every 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>

Upvotes: 6

Views: 20317

Answers (2)

Gerard
Gerard

Reputation: 15796

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>

Upvotes: 17

Thomas Lamothe
Thomas Lamothe

Reputation: 194

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;
  }

}

Upvotes: -1

Related Questions