Jquery ui slider - how to invert a selection range

Question

I have a somewhat strange request that allows the user to select a range on the slider, but allow them to invert the range selection on the slider. For example, if they have this choice on the slider:

<---- [] ========== [] ---->

they can press a button and invert this selection. We would like to visually display it as follows:

<==== [] ---------- [] ====>

Then the slider will continue to function as expected, but with deselection. I know that you can do something similar with this slider by setting a fixed maximum or min in the range with a single descriptor, but I'm not sure if this is possible using two handles. Does anyone know if this is possible using the jQuery UI slider?

Answer 1

You can play with CSS to make it look the way you want. The inside of the slider:

<----[]==========[]----> ^^^^^^^^^^ 

gets its background from .ui-widget-header , the outer part of the slider:

 <----[]==========[]----> ^^^^ ^^^^ 

gets its background from .ui-widget-content . To undo them, you just need toggleClass to switch these classes to the widget as a whole (for the outer background) and thumb (for the inner area). The outer region is just a slider, the inner region .ui-slider-range inside the slider.

For example, if you have a slider:

 <div id="slider-range"></div> 

Then you can flip the backgrounds with this:

 $('#slider-range, #slider-range .ui-slider-range').toggleClass('ui-widget-header ui-widget-content'); 

You may need to keep track of which mode is in the slider, or just check the classes on #slider-range .ui-slider-range .

Demo: http://jsfiddle.net/ambiguous/Mu8XS/

If you are uncomfortable with switching jQuery-UI classes, you can wrap the slider in <div> , switch the class to <div> and override jQuery-UI CSS:

 .inverted .ui-widget-content { /* The usual background properties for .ui-widget-header */ } .inverted .ui-widget-header { /* The usual background properties for .ui-widget-content */ } 

You can then switch .inverted to a <div> wrapper to swap backgrounds around.