javascript - Bootstrap范围 slider 更改事件

Question

我想在引导范围 slider 值发生变化时触发一个事件，然后想执行一些ajax。范围 slider 用于价格。

这是我的ajax:

 var ajaxCallBack = function (e) {

            var input = $(this).val();

            if ( input.length >= 2 ) {
                $('#spinner').show();
                $.ajax({
                    type: "GET",
                    url: "{{ path('search') }}",
                    dataType: "json",
                    data: {search:  $('#form_search').val(), brand: $('#form_brand').val(), price: $('#form_price').val()},
                    cache: false,
                    success: function (response) {
                        $('.card-deck').html(response.classifiedList);
                        $('#spinner').hide();
                        console.log(response);
                    },
                    error: function (response) {
                        console.log(response);
                    }
                });
            }

我尝试了很多选择，但没有任何帮助。

谁能帮忙!

Answer 1

只需使用 https://github.com/seiyria/bootstrap-slider#events 中列出的事件即可

$('#ex1').slider({
	formatter: function(value) {
		return 'Current value: ' + value;
	}
}).on('change', change); // Change the 'change' to any other event slide, slideStart, etc.


function change(e){
    $('.card-deck').html($(this).val() + "<br/>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js"></script>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

<div class="card-deck">

</div>