Question

我想制作带有范围的UI滑块，使用我根据控件中单击的秒创建的外部控件向前和向后移动

我想将Start和Endpoints向前和向后移动，当我点击1S前进时，startPoint应向前移动1秒，与5S前进相同。当我向后单击1S时，EndpOint应向后移动到1S，同样的事情发生在5S向后

我为这个

创造了小提琴

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

Answer 1

您的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

jQuery UI Slider使用外部控件前进和后退

1 个答案: