html - How to real-time move the range type input's slider using javascript without refreshing page? - Stack Overflow

admin管理员组

文章数量:1341856

<input type="range" value="0" min="0" max="100">

I did try the following, but the slider no response.

var i = 0;
setInterval(function(){
    document.querySelector('input[type=range]').value = i++;
}, 1000);

or impossible?

<input type="range" value="0" min="0" max="100">

I did try the following, but the slider no response.

var i = 0;
setInterval(function(){
    document.querySelector('input[type=range]').value = i++;
}, 1000);

or impossible?

• javascript
• html
• input
• slider
• range

Share Follow edited Feb 6, 2011 at 6:54 mockee asked Feb 6, 2011 at 3:02 mockeemockee 1,32522 gold badges1414 silver badges2121 bronze badges 1

• working at chrome for me. check this fiddle. jsfiddle/naveen/u7wke – codeandcloud Commented Feb 6, 2011 at 11:03

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

you can do it with stepUp and stepDown functions

document.getElementById("myslider").stepUp(1);
document.getElementById("myslider").stepDown(1);

working demo : http://jsfiddle/dp6cwoom/

<input type="range" value="0" min="0" max="100">
<script type="text/javascript"><!--
document.querySelector('input[type=range]').value = 30;
--></script>

Works ok in Safari4 (Win).
Ensure, your code is after input element or is called inside onload or similar function.

works fine in Chrome http://jsfiddle/gCSFV/

It should work.

---

As per the MDC doc on document.querySelector Its dsupported by IE8, FF3.5, Chrome1, Safari3.2 and so is input type=range

Syntax

element = document.querySelector(selectors);

Returns null if no matches are found; otherwise, it returns the first matching element.

Be careful that querySelector returns only first element of the matched ones.
So, document.querySelector('input[type=range]') wont be as desirable as something like document.querySelector('#myrange')

I found a way but not very good: to modify the style of input dynamically.

var i = 0,
    oRange = document.querySelector('input[type=range]');

setInterval(function(){
    oRage.value = i;
    oRage.style.fontSize = i + 'px';
    i++;
}, 1000);

本文标签：