ブートストラップ範囲スライダ変更イベント

Question

ブートストラップ範囲スライダ値が変更されたときにイベントをトリガしたかったので、いくつかのajaxを実行したかったのです。範囲スライダは価格です。

これは私の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

angularJSを見てみましょう。また、 NG-変更と呼ばれるディレクティブがあり、これを見て、あなたがslideStartとslideStopイベントに

を使用する必要がありますように

https://stackoverflow.com/a/21869493/7231415

が見えます

またはng-model変数をバインドして変更を監視することができます。

Answer 2

ただ、スライダーとは何の関係もありません、あなたが範囲スライダの変更イベントまたは値の掲示で問題が発生しているhttps://github.com/seiyria/bootstrap-slider#events

$('#ex1').slider({ 
 
\t formatter: function(value) { 
 
\t \t return 'Current value: ' + value; 
 
\t } 
 
}).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>