获取并设置jQuery移动滑块的值

Question

如何在jQueryMobile滑块更改时调用Javascript函数，如何从回调中设置滑块的值？

这是我到目前为止所尝试的内容：

    <div class="switch-actor slider" >
      <input type="range" name="my_test_slider" value=45 min="0" max="100" />
    </div>

这是Javascript部分：

setSliders = function(){
  $('.slider').each(function(){
    var elem;
    elem = $(this);
    console.log("this slider initialized! ", elem);
    elem.on('change', function(event){
      console.log("event, ui: ", event);
    });
  });
};

修改

这个答案也无济于事：https://stackoverflow.com/a/14961612/1952991

修改-2

这个黑客现在有效：

setSliders = function(){
  $('.slider').each(function(){
    var elem, actor, slider, setSliderValue;
    elem = $(this);
    actor = elem.data('actor');
    slider = elem.find('input');
    slider.on('change', function(){
      return console.log(slider.prop('value'));
    });
    setSliderValue = function(val){
      var movingPart;
      slider.prop('value', val);
      movingPart = elem.find('a');
      movingPart.prop('aria-valuenow', val);
      movingPart.prop('aria-valuetext', val);
      movingPart.prop('title', val);
      return movingPart.css('left', String(val + '%'));
    };
    setSliderValue(23);
  });

Answer 1

如果将.slider类放在输入而不是容器div：

<div class="switch-actor " >
  <input class="slider" type="range" name="my_test_slider" value="45" min="0" max="100" />
</div>

您可以简单地捕获更改事件并设置val（）：

$(".slider").on("change", function(){
    console.log($(this).val());
});

$("#btnSet").on("click", function(){
    $(".slider").val(42).slider( "refresh" );
    //make the change event fire
    $(".slider").change();
});

  

<强> DEMO

Answer 2

当与滑块进行初始交互时，会触发

slidestart。包括拖动和点击。

$（＆＃34; .selector＆＃34;）。on（＆＃39; slidestart＆＃39;，function（event）{}）;

在与滑块交互结束时触发的slidestop。包括拖动和点击。

$（＆＃34; .selector＆＃34;）。on（＆＃39; slidestop＆＃39;，function（event）{}）;