jQuery Slider - 单手柄，多范围答案

【问题标题】：jQuery Slider - Single handle, multiple rangesjQuery Slider - 单手柄，多范围
【发布时间】：2014-07-07 04:11:44
【问题描述】：

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

$( "#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
   }    
});

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

【问题讨论】：

对不起！但没有得到你！如果可能的话，试着创建一个你的代码，或者通过一些你想要什么的屏幕截图来提供泥潭信息！
这是一个很好的例子：将滑块想象成一个温度控制器，我想读取摄氏度和华氏度的温度，或者任何其他用户定义的刻度。摄氏温度范围为 min:0-max:100，华氏温度范围为 min:32-max:212。我想通过更改单个滑块来获得两个刻度的读数。

标签： jquery jquery-ui slider jquery-ui-slider

【解决方案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" ) );

欢迎任何更好的想法:)

【讨论】：