如何在Bootstrap-Slider插件中捕获值onChange

Question

我想不出如何在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:未定义$

Answer 1

你试过了吗

$('#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) });

Answer 2

这个解决方案需要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);
});