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

Question

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!

Sumit Sharma · Accepted Answer · 2022-06-03 05:24:38Z

2

You can take a array and store the values you need in your slider.

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

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

slider.oninput = function(){
    output.innerHTML = values[this.value];
};
slider.oninput();

</script>

answered Jun 3, 2022 at 5:24

Sumit Sharma

1,2331 gold badge6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TechySharnav Over a year ago

Actually, there's even no need for arrays for this.

ankitbatra22 · Accepted Answer · 2022-06-03 05:21:28Z

0

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>

answered Jun 3, 2022 at 5:21

ankitbatra22

4272 silver badges5 bronze badges

Comments

Ganesh MB · Accepted Answer · 2022-06-03 05:37:34Z

0

If you have a fixed range you can use this method.

<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 === "1" ? '6 mo' : slider.value;

function myFunction(pos) {
  const myMonths = [6, 12, 24, 36, 48, 60]
  return myMonths[pos - 1] + ' mo'
}


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

answered Jun 3, 2022 at 5:37

Ganesh MB

1,1792 gold badges17 silver badges31 bronze badges

Comments

TechySharnav · Accepted Answer · 2022-06-03 05:43:36Z

0

You can just use min, max, and step attributes to control the range of slider, without any need of JavaScript.

Also, There's a typo in your code. The name of attribute is step not steps.

<div class="slidecontainer">
  <input type="range" min="6" max="60" step="6" value="6" 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>

If you want "mo" after the value, you can just do output.innerHTML = this.value + "mo";

edited Jun 3, 2022 at 5:43

answered Jun 3, 2022 at 5:38

TechySharnav

5,1142 gold badges13 silver badges29 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related