jQuery слайдер пользовательского интерфейса - как инвертировать выбор диапазона

У меня есть несколько странный запрос, чтобы позволить пользователю выбрать диапазон на слайдере, но разрешить им инвертировать выбор диапазона на слайдере. Например, если у них есть этот выбор на слайдере:

Они могут нажать кнопку и инвертировать этот выбор. Мы хотели бы визуально отобразить его следующим образом:

Ползунок будет продолжать функционировать, как и ожидалось, но с подсветка поменялась местами. Я знаю, что вы можете сделать что-то подобное с этим слайдером, установив фиксированный максимум или минимум на диапазоне с одной ручкой, но не уверен, что это возможно, когда используются две ручки. Кто-нибудь знает, можно ли это сделать с помощью ползунка пользовательского интерфейса jQuery?

1 4
jquery jquery-ui-slider

1 ответ:

Вы можете возиться с CSS, чтобы сделать его похожим на то, что вы хотите. Внутренняя часть слайдера: 

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

Получает свой фон из .ui-widget-header, внешней части слайдера: 

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

Получает свой фон от .ui-widget-content. Поэтому, чтобы обратить их вспять, вам просто нужно toggleClass для переключения этих классов на виджете в целом (для внешнего фона) и на большом пальце (Для внутренней области). Внешняя область-это просто сам слайдер, внутренняя область-это .ui-slider-range Внутри слайдера. ползунок.

Например, если у вас есть такой слайдер: 

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

Затем вы можете изменить фон следующим образом: 

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

Вы можете отслеживать, в каком режиме находится слайдер, или вы можете просто проверить классы на #slider-range .ui-slider-range вместо этого.

Демо: http://jsfiddle.net/ambiguous/Mu8XS/

Если вам неудобно переключать классы jQuery-UI, то вы можете обернуть ползунок в <div>, переключить класс на этот <div> и переопределение CSS jQuery-UI: 

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

Затем вы можете переключить .inverted на обертке <div>, чтобы поменять фон вокруг.

5