如何使用JavaScript / Jquery / Knockout JS将数组数组绑定到Range Slider

时间:2016-04-14 11:56:11

标签: javascript jquery html knockout.js

我在下面尝试了以下代码:

<input type="range" id="slider1" min="0" max="6" step="1" value="1">
<output id="output"></output>
var values = [2, 4, 8, 16, 32, 64, 128];
$('#slider1').change(function () {
    $('.slider #slider1').attr('value', values[this.value]);
    memoryslider = $('input[id="slider1"]').attr('value');
    var data = document.getElementById("output");
    data.innerText = memoryslider;
});

这个工作正常但鼠标点击后显示出来但是我想在鼠标移动时输出值,有没有可能请帮助我..

1 个答案:

答案 0 :(得分:2)

要在拖动范围时实现#output元素的更新,您应该使用input事件。您也不应在更改输入时手动更改value属性。试试这个:

var values = [2, 4, 8, 16, 32, 64, 128];
$('#slider1').on('change input', function() {
  var value = values[this.value];
  $("#output").text(value);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider1" min="0" max="6" step="1" value="1">
<output id="output"></output>