javascriptjqueryhtmladminltebootstrap-slider

Call Jquery function on Input tag having data-slider

I am using ready made template provided by AdminLTE Bootstrap Admin Dashboard Template. I have following slider input at html page & want to call jquery event on slider

<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-->

It looks like,

enter image description here

How can I call event when I slide value in it?

I tried following but not working,

$(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")
});
Solution

  • According to bootstrap-slider doc you have to handle 'slideStop' event. Y've preapred a sample fiddle for you.

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

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