javascript - jQuery UI Slider通过外部控件向前和向后移动

我想使UI滑块的范围向前和向后移动与我正在创建的外部控件基于在控件中单击的秒数
我想把起点和终点向前和向后移动，当我单击1S forward时，起点应该向前移动1S，就像5S forward一样。当我单击1S backward时，端点应该移到1S backward
我创造了小提琴来解决这个问题
HTML格式：

<h1>HTML Slider Test</h1>
<div id="slider"></div>
<p>Your slider has a value of <span id="slider-value"></span></p>
<ul>
  <li><a href="javascript:void(0);" class="time-change" data-id="5" data-value="dec" >5S </a></li>
  <li><a href="javascript:void(0);" class="time-change" data-id="1" data-value="dec" >1S </a></li>
</ul>
<div class="play-pause-btn"><a href="javascript:void(0);" class="play-pause" id="play-pause" ></a></div>
<div class="forward-blk">
<ul class="">
  <li><a href="javascript:void(0);" class="time-change" data-id="1" data-value="inc"  > 1S</a></li>
  <li><a href="javascript:void(0);" class="time-change" data-id="5" data-value="inc"  >5S</a></li>
</ul>

JS公司：

 $(".time-change").bind("click", function() {
        var ttype=$(this).data('value');
        var dtime=parseInt($(this).data('id'));
        if($("#slider" ))
             {
            var curstart =  $("#slider").slider("option", "values")[0];
            var curstop = $("#slider").slider("option", "values")[1];
             }
        if (ttype=="inc") {

             if($("#slider" ))
             {
                 var incTime= dtime;
                 //$( ".cut-slider" ).slider( "option", "min", curstart );
                 $( ".cut-slider" ).slider( "option", "values", [ incTime, curstop ] );
             }
        }else{

            if($("#slider"))
             {
       var decTime= dtime;
                //$( ".cut-slider" ).slider( "option", "max", curstop );
                $( "#slider" ).slider( "option", "values", [ curstart, decTime ] );

             }
        }
        });

小提琴：Fiddle

最佳答案

您的values必须在min-max范围内（包括在内）。如果不使用values中定义的值来增加或减少滑块step，则会遇到不希望的行为。在您的情况下，将该值设置为大于或等于1的任何值都是无效的，因为max是0.5。
您需要做的是将values属性设置为[0, 0.5]，这是您的范围。当您增加或减少范围步长时，您需要使用0.01的增量：

$(".time-change").bind("click", function() {
  var ttype = $(this).data('value');
  var dtime = parseInt($(this).data('id'));
  if ($("#slider")) {
    var curstart = $("#slider").slider("option", "values")[0];
    var curstop = $("#slider").slider("option", "values")[1];
  }

  var stepValue;
  //Make sure handle 1 doesn't pass handle 2 (remove this if you want to allow passing)
  if (ttype == "inc" && curstart < curstop - step) {
    curstart = curstart + (step * dtime);
  } else if (ttype == "dec" && curstop > curstart + step) { //Make sure handle 2 doesn't pass handle 1 (remove this if you want to allow passing)
    curstop = curstop - (step * dtime);
  }
  $("#slider").slider("option", "values", [curstart, curstop]);
});

Updated Fiddle