CODEWITHSUNDEEP
javascripthtmlinputsliderrange
mockee
mockee

Reputation: 1325

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

<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?

Upvotes: 4

Views: 12287

Answers (5)

user889030
user889030

Reputation: 4754

you can do it with stepUp and stepDown functions

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

working demo : http://jsfiddle.net/dp6cwoom/

Upvotes: 4

mockee
mockee

Reputation: 1325

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

Upvotes: 0

kirilloid
kirilloid

Reputation: 14304

<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.

Upvotes: 2

codeandcloud
codeandcloud

Reputation: 55200

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')

Upvotes: 0

Kris Ivanov
Kris Ivanov

Reputation: 10598

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

Upvotes: 1

Related Questions