javascript - 获取和设置 jQuery 移动 slider 的值

Question

当 jQueryMobile slider 更改时，如何调用 Javascript 函数以及如何通过回调设置 slider 的值？

这是我迄今为止尝试过的:

    <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