javascript - 更新 html 滑块属性但在页面中不可见

Question

我有一个 html 滑块，我想动态更改滑块上光标的位置。

看看我的 jsfiddle 演示：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");
};

我将最大值设置为 14，然后我有一个按钮。当我单击按钮时，我想更改光标的位置，为此，我将属性值更改为 10，但光标不移动。但是，如果我单击光标，光标会移动，但这并不是我真正想要的，因为我只想更改属性值并查看光标的移动。

有人有这样做的想法吗？

我只搜索纯 javascript 解决方案，因为我使用的是 js_of_ocaml ( http://ocsigen.org/js_of_ocaml/ )。我想要一个 javascript 来翻译 js_of_ocaml。

Answer 1

尝试这个：

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

Answer 2

不确定是否有更好的方法，但同时这里有一个解决方法：

var b = document.getElementById("b");
var slider = document.getElementById("slider");
b.onclick = function() {
    var container = slider.parentNode;
    slider.remove();
    container.innerHTML = '<input type="range" id="slider" min="0" max="14" value="12" />' + container.innerHTML

};