jqueryjquery-uicontrolsjquery-ui-slider

jquery ui slider -- how to invert the range selection

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?

Solution

  • 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.