在具有数据滑块的输入标签上调用 Jquery 函数

Question

我正在使用 AdminLTE Bootstrap 管理仪表板模板 提供的现成模板。我在 html 页面上有以下滑块输入并想在滑块

上调用 jquery 事件

<div class="price-range"><!--price-range-->
  <h2>Price Range</h2>
  <div class="well text-center">
    <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="600" data-slider-step="5" data-slider-value="[250,450]" id="sl2" ><br />
    <b id="min" class="pull-left">$ 0</b>
    <b id="max" class="pull-right">$ 600</b>
  </div>
</div><!--/price-range-->

看起来，

滑动数值时如何调用事件？

我尝试关注但没有成功，

$(document).on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', '#sl2', function() {
  alert("hii")
});

Answer 1

根据bootstrap-slider doc you have to handle 'slideStop' event. Y've preapred a sample fiddle给你。

const slider = $('#ex1').slider({
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});

slider.on('slideStop', function(e) {
  console.log('value = ' + e.value);
});

在具有数据滑块的输入标签上调用 Jquery 函数

Call Jquery function on Input tag having data-slider

html

javascript

jquery

bootstrap-slider

adminlte