Question

是否可以使用带有单个手柄的滑块，同时控制多个刻度？我希望实现这样的目标：

$( "#slider" ).slider({
   scale1: {min:0,max:1,step:0.01},
   scale2: {min:0.3,max:0.8,step:0.01},
   scale3: {min:255,max:0,step:1} 
});

或者可能是单个范围滑块，并控制幻灯片回调中的其他比例？

$( "#slider" ).slider({
   min:1,
   max:100,
   step:1,
   value:100,
   slide: function( event, ui ) {
      // based on the slider position calculate the appropriate value on another scale.
      // eg 0.3-0.8
   }    
});

任何想法如何做到这一点？

Answer 1

好的，我在幻灯片回调

中用linear conversion解决了这个问题

$( "#slider" ).slider({
   orientation:"horizontal",
   min:0,
   max:1,
   step:0.01,
   value:1,
   slide: function( event, ui ) {
      var oldValue = ui.value;
      var oldMin = 0;
      var oldMax = 1;
      var newMin = 0.3;
      var newMax = 0.8;
      var newValue = ( (oldValue - oldMin) / (oldMax - oldMin) ) * (newMax - newMin) + newMin;

      $( "#value" ).val( ui.value + " " + newValue );
   }    
});
$( "#value" ).val( $( "#slider" ).slider( "value" ) );

欢迎任何更好的想法：）

jQuery Slider - 单手柄，多种范围

1 个答案: