CODEWITHSUNDEEP
javascripthtml
m4rc04
m4rc04

Reputation: 15

How can I animate an input range to change its value dynamically?

I have an HTML element input of type range:

<body onload="rotar()">
  <img src="#" id="locator" />
  <input type="range" name="points" id="loop" min="1" max="20" data-show-value="true">
</body>

It goes basically like this: This page shows images that change dynamically and I want the slider with ID loop to change its value, just like the images so it moves according to them.

function rotar(){
var slider = document.getElementById("loop");
var locator = document.getElementById('locator'),
    dir = 'static/visor/img/',                   
    delayInSeconds = 3,                        
    num = 1,
    len = 20;
setInterval(function(){
    locator.src = dir + num+'.png';
    if (num === len){
        num = 1;
    }
    else{
        num++;
    }
    slider.value = num;
}, delayInSeconds * 50);}

Upvotes: 0

Views: 2508

Answers (2)

ThS
ThS

Reputation: 4783

Your issue is with the delay passed to the setInterval method, as the delay argument is in milliseconds, to get 2.8 seconds you'd have to multiply the delayInSeconds variable by 1000.

You had some mistakes in your code, you refreferenced the img#locator element with the variable name rotator the you used the variable name locator, which will cause an Undefined variable error. Im my answer I changed the variable's name from rotator to locator, also I made the delay to 2.8 seconds.

Here's a demo:

function rotar() {  
  var slider = document.getElementById("loop"),
      locator = document.getElementById('locator'),
      dir = 'static/visor/img/',
      delayInSeconds = 2.8,
      num = 1,
      len = 20;
  
  setInterval(function() {  
    locator.src = dir + num + '.png';    
    num = (num === len) ? 1:num + 1;
    slider.value = num;
  }, delayInSeconds * 1000);
}
<body onload="rotar()">
  <img src="#" id="locator" />
  <input type="range" name="points" id="loop" min="1" max="20" data-show-value="true">
</body>

Upvotes: 0

Mohammad
Mohammad

Reputation: 1577

I don't have any image dir so i just did it with an simple input. please check this http://jsfiddle.net/maxofpower/tAs6V/275/

<body onload="rotar()">
 <form ><div>
  <input id="loop" onchange="amount.value=rangeInput.value" oninput="amount.value=rangeInput.value" type="range" min="0" max="200" name="rangeInput" />
  <input id="box" type="text" value="0" name="amount" for="rangeInput"  oninput="rangeInput.value=amount.value" />
 </div></form>
</body>

<script>
 function rotar() {
 var slider = document.getElementById("loop");                             
  var num = 1;
  setInterval(function(){
  slider.value = num++;
  }, 500);
  };
</script>

Upvotes: 1

Related Questions