2010-08-31 5 views
0

Можете ли вы установить ползунок jQuery, чтобы иметь максимальное значение 10 000, - но затем, если он перемещается на все влево, он масштабируется, как если бы он был слайдером от 1 до 50 (если они перемещают его вправо, он возвращается к очень высокое значение).Установка максимального значения слайдера jQuery для неограниченного?

Так что было бы что-то вроде:

мин: 0, макс: 50, secondmax: 10000, (< - это то, что мне нужно, чтобы выяснить). значения: [0, 50, 10000],

У нас есть фильтр по ползунгу на нашей рабочей доске и он по умолчанию должен быть неограниченным - а затем, если пользователь перемещает ползунок влево, он должен масштабироваться между разумными значения (1-50).

ответ

3

Вероятно, легче справиться с этим за пределами самого слайдера, например:

Вы могли бы сделать слайдер что-то вроде 1-51. В вашем коде для фильтра расстояния обнаружите значение> 50 и сделайте его выполненным для фильтрации по неограниченному расстоянию (возможно, просто заменив значение 51, на 10 000)

1

Возможно, для пользователей будет более понятным использовать обычный слайдер и флажок «Без ограничений».

+0

У меня было это с помощью тестирования пользователя, показавшего, что это сбивает с толку - и люди действительно не понимали. Проблема в том, что по умолчанию фильтрация по расстоянию отключена. Скрыв ползунок и показывая его, когда флажок ([фильтр по расстоянию) был отмечен, был слишком визуально тонким (люди пропустили этот флажок) и с видимым, но не активным, пока флажок не был установлен, был слишком запутанным (люди задавались вопросом, почему это было 't фильтрация по расстоянию) – Walker

2

В слайде: функция (e, ui) {...} вы можете определить, что такое текущее значение (ui.value), и если ui.value> max, то измените максимальное значение. Это будет выглядеть примерно так:

var $mySlider = $('#mySlider'); 
$mySlider.slider({ 
    slide: function(e, ui){ 
     var currMax = $mySlider.slider('option', 'max'); 
     if (ui.value > currMax) { 
     $mySlider.slider('option', 'max', currMax++) 
     } 
    } 
}); 

Или так:

var $mySlider = $('#mySlider'); 
$mySlider.slider({ 
    slide: function(e, ui){ 
     var currMin = $mySlider.slider('option', 'min'); 
     var currMax = $mySlider.slider('option', 'max'); 
     if (ui.value >= currMax) { 
     $mySlider.slider('option', 'min', currMin++); 
     $mySlider.slider('option', 'max', currMax++); 
     } else if (ui.value <= currMin){ 
     $mySlider.slider('option', 'min', currMin--); 
     $mySlider.slider('option', 'max', currMax--); 
     } 
    } 
}); 
1

Уверенный, почему бы и нет? Если вы хотите сделать это, вы можете запускать функцию каждый раз, когда ползунок изменяется. В этой функции вы можете проверить значение текущей позиции. Если это меньше 50, измените слайдер, как вам нужно. Если это выше 50, то же самое.

Смежные вопросы