変更HTML UIスライダースライドイベント

Question

に選択だから私は選択を持っていると私はしたいと思っ何http://filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

<select id="{{ section }}-anonymity-select"> 
    <option value="anonymous"></option> 
    <option value="uw-student"></option> 
    <option value="username"></option> 
</select> 

function setup_form(section){ 
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: { 
     slide: function(event, ui){ 
      alert(ui.value); 
     } 
    } 
    }).hide(); 

を使用してスライダーに変換する機能は、後に、今のところ（です値に基づいて別の要素のinnerHtmlを変更したい）ユーザーがスライドしているときのスライダの現在の値を警告します。

コードは、スライドイベントが「スライド中のすべてのマウス移動でトリガされます」という点を除いて、ほとんど何もしません。とてもうるさい。私が望むものではありません。そして、プログラムで値を変更するようにも思われます。私のハンドルは、どこにでもジャンプし続けます。

私も変更を試みましたが、停止時にのみトリガされるため、マウスボタンを離したり戻したりするだけでは、警告は表示されません。悪い。

どうすれば対応できますか？私はイベントとして「価値の変化」のようなものが必要だと思いますか？しかし、それを常にチェックせずに実装する方法はありますか？

Answer 1

もちろん、2分後に私は解決策を実現します。

var slidervalue = 0; 

function setup_form(section){ 
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: { 
     slide: function(event, ui){ 
      if(ui.value!=slidervalue){ 
       $("#"+section+"-anonymity-header").html("Select anonymity level: "+ui.value); 
       slidervalue = ui.value; 
      } 
     } 
    } 
    }).hide(); 

Answer 2

よりもむしろslideイベントを使用して、ユーザーがウィジェットとの対話を停止した後にのみ発動changeイベントを使用する必要がありますに

slide: function(event, ui){ 
     alert(ui.value); 
    } 

：

stop: function(event, ui){ 
     alert(ui.value); 
    } 

変更を

ウォリア！ :)

このイベントは、ユーザーがスライドを停止するとトリガーされます。

出典：http://jqueryui.com/demos/slider/#event-stop

更新

あなたはslideイベントを使用して、ユーザーが何の警告がタイムアウトをキャンセルする（表示されませんスライドし続けるときに値を警告するタイムアウトを設定することができます）：

var slidervalue = 0, 
    timer; 

function setup_form(section){ 
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: { 
     slide: function(event, ui){ 
      clearTimeout(timer); 
      setTimeout(function() { 
       if(ui.value!=slidervalue){ 
        $("#"+section+"-anonymity-header").html("Select anonymity level: "+$(this).slider('values', ui.value)); 
        slidervalue = ui.value; 
       } 
      }, 100); 
     } 
    } 
    }).hide();