Updating html slider attribute but not visible in the page

Question

I have a html slider and I want to dynamically change the position of the cursor on the slider.

Look at here my jsfiddle demo : http://jsfiddle.net/8DCS6/

<input type="range" id="slider" min="0" max="14" value="14" />
<input type="button" id="b" value="Update slider"/>

var b = document.getElementById("b");
var slider = document.getElementById("slider");
b.onclick = function() {
    slider.setAttribute("value","10");
};

I put the max value to the 14 and I have a button. When I click on the button, I want to change the position of the cursor and for that, I change the attribute value to to 10 but the cursor doesn't move. But if I click on the cursor, the cursor moves but it's not really what I want because I just want to change the attribute value and see the move for the cursor.

Somebody have an idea to do this ?

I'm searching only a pure javascript solution because I'm using js_of_ocaml (http://ocsigen.org/js_of_ocaml/). I want to have a javascript to translante in js_of_ocaml.

Answer 1

Try this:

var b = document.getElementById("b");
var slider = document.getElementById("slider");
b.addEventListener("click", function() {
slider.value = 10;
})