jQuery Slider - Single handle, multiple ranges

Question

Is it possible to have a slider with a single handle, that controls multiple scales at the same time? I'd like to achieve something like this:

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

Or perhaps a single range slider, and control the other scales within the slide callback?

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

Any ideas how to do this?

Sorry ! but didn't get you ! If possible try to create a fiddle of your code or provide mire information by some screen shot of what do you want exactly ! — Rahul Gupta, Jul 07 '14 at 04:45
Here is a good example: Imagine the slider as a temperature controller, and I want to read temperature both in Celsius and in Fahrenheit, or any other user defined scale. The Celsius scale would range from min:0-max:100, the Fahrenheit scale would range from min:32-max:212. I want to get a reading on both scales by changing a single slider. — orszaczky, Jul 07 '14 at 07:37

score 0 · Answer 1 · edited May 23 '17 at 12:05

Ok at this point I solved it with a linear conversion in the slide callback

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

Any better ideas are welcome :)

jQuery Slider - Single handle, multiple ranges

1 Answers1