2

我无法弄清楚如何捕获 bootstrap-slider 插件上的值变化。

阅读文档。尝试了很多很多东西。

<div class="form-group">
  <label class="col-md-4 control-label" for="language_spanhish">Spanish</label>
  <div class="col-md-6">
    <input id="language_spanish" type="text" data-provide="slider"
      data-slider-ticks="[0, 1, 2]"
      data-slider-min="0"
      data-slider-max="2"
      data-slider-step="1"
      data-slider-value="0"
      data-slider-tooltip="show"
      onchange="alert('you changed it')"
    />
  </div>
</div>

试过（没有成功）：

    document.getElementById("#language_spanish").getAttribute("data-slider-value");
        var getIt = $('#language_spanish').data('slider').getValue();
        alert(getIt);
spanish.on("slide", function(slideEvt) { console.log(slider.getValue() ); alert(slideEvt.value); });
        $('#language_spanish').slider().on('slide', function(ev){ alert("I changed it") });

只是寻找任何成功捕捉到滑块值变化的人。如果插件不支持捕获值变化的能力，请回帖。

我从一些尝试中得到的一个控制台日志错误是：

未捕获的 ReferenceError：$ 未定义

4

2 回答 2

2

你试过了吗

$('#language_spanish').on('input', function(ev){ alert("I changed it") });

对于Uncaught ReferenceError: $ is not defined您可以绕过 jQuery（未测试）：

var slider = document.getElementById("language_spanish")
console.log("init : " + slider.value)
slider.addEventListener('input', function(e){ alert("I changed it " + e.currentTarget.value + " === " + input.value) });
于 2017-02-21T21:34:51.097 回答
0

此解决方案需要 jquery。

滑块带有它自己的事件处理程序，它不包括输入，但包括“更改”。https://github.com/seiyria/bootstrap-slider

$("#language_spanish").on("change", function(){
console.log("Changed");
});

如果要获取滑块的新值，那么。

$("#language_spanish").on("change", function(event){
console.log("Changed to ", event.value.newValue);
});
于 2017-12-19T12:04:54.763 回答