How to change input value as per custom numbers in JavaScript?

I want to change range value as per given custom value in screen shot. Right now I’m getting 1,2,3,4,5,6 values onchange of range but I need 6,12,24,36,48,60 values. How can I do this?

My Code:

<div class="slidecontainer">
  <input type="range"min="1" max="6" steps="1" value="1" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

ThankYou for your efforts!

Answer

The below snippet solves your problem

Changing this.value to set values in an array

<div class="slidecontainer">
  <input type="range"min="1" max="6" steps="1" value="1" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<script>
values = [6,12,24,36,48,60];
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = values[this.value-1];
}
</script>

Advertisement

Answer