jquery ui slider -- how to invert the range selection

Question

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

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

they can click a button and invert that selection. We would like to visually display it like this:

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

The slider would then continue to function as expected but with the highlighting reversed. I know you can do something similar with this slider by setting a fixed max or min on the range with one handle, but not sure if it's possible when two handles are being used. Does anyone know if this is doable with the jQuery UI slider?

mu is too short · Accepted Answer · 2012-02-01T17:26:18.993

You can fiddle with the CSS to make it look like you want. The inner portion of the slider:

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

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

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

gets its background from .ui-widget-content. So to reverse them, you just need a toggleClass to toggle those classes on the the widget as a whole (for the outer background) and the thumb (for the inner area). The outer area is just the slider itself, the inner area is the .ui-slider-range inside the slider.

For example, if you have a slider like this:

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

Then you can reverse the backgrounds with this:

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

You might want to keep track of which mode the slider is in somewhere or you could just check the classes on #slider-range .ui-slider-range instead.

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

If you're not comfortable toggling the jQuery-UI classes then you could wrap the slider in a <div>, toggle a class on that <div>, and override the 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 */
}

Then you could toggle .inverted on the wrapper <div> to swap the backgrounds around.

@Ben: I hope you've rather set CSS correctly than run scripts to toggle classes... But it's the best solution that you visually set range style to look like it's *range-reject* slider. +1 to Mu... — Robert Koritnik, Dec 30 '11 at 10:41
Robert, I have to do it in code. The user will toggle the selection with a button, so it would have to happen in the click event. Mu's solution is ideal for what i need. Thanks. — Ben, Jan 03 '12 at 13:09
@Ben: You could also add or remove the `inverted` class on a wrapper `
` in your click handler, then you could use the second approach. Whatever works. — mu is too short, Jan 03 '12 at 19:12

jquery ui slider -- how to invert the range selection

1 Answers1