Не уверен, хотите ли вы, чтобы шкала ползунка была пропорциональна вашим значениям *, но если это так, я предоставил решение этой проблемы для кого-то еще, кто задал тот же вопрос. Вы можете найти мое решение здесь . По сути, я использую событие slide, которое запускается при перемещении ползунка для имитации пошагового перехода, но на основе пользовательского массива, определяющего шаги. Таким образом, он только позволяет вам «шагнуть» к предварительно заданным значениям, даже если они неравномерно распределены.
* Другими словами, если вы хотите, чтобы ваш слайдер выглядел так:
|----|----|----|----|----|----|----|
0 10 20 100 1000 2000 10000 20000
, затем перейдите к одному из других решений, но если вы хотите, чтобы ваш слайдер выглядел следующим образом (диаграмма не в масштабе):
|--|--|-------|-----------|-----------|--------------------|--------------------|
0 10 20 100 1000 2000 10000 20000
Тогда решение, с которым я столкнулся, может быть больше, чем вы ищете.
Редактировать: Хорошо, эта версия скрипта должна работать с двумя ползунками:
$(function() {
var values = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var slider = $("#price-range").slider({
orientation: 'horizontal',
range: true,
min: 0,
max: 1000000,
values: [0, 1000000],
slide: function(event, ui) {
var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
var includeRight = event.keyCode != $.ui.keyCode.LEFT;
var value = findNearest(includeLeft, includeRight, ui.value);
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}
else {
slider.slider('values', 1, value);
}
$("#price-amount").html('$' + slider.slider('values', 0) + ' - $' + slider.slider('values', 1));
return false;
},
change: function(event, ui) {
getHomeListings();
}
});
function findNearest(includeLeft, includeRight, value) {
var nearest = null;
var diff = null;
for (var i = 0; i < values.length; i++) {
if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
var newDiff = Math.abs(value - values[i]);
if (diff == null || newDiff < diff) {
nearest = values[i];
diff = newDiff;
}
}
}
return nearest;
}
});
Обратите внимание, что в дальнем левом конце это выглядит немного забавно, поскольку прыжки расположены так близко друг к другу по сравнению с правым концом, но вы можете видеть его шаг по желанию, если вы используете стрелки клавиатуры для перемещения ползунка. Единственный способ обойти это - изменить шкалу, чтобы она не была столь радикально экспоненциальной.
Редактировать 2:
Хорошо, если интервал слишком преувеличен, когда вы используете истинные значения, вы можете использовать набор поддельных значений для ползунка, а затем искать реальное значение, которое соответствует, когда вам нужно использовать реальное значение (аналогично какие другие решения здесь предложены). Вот код:
$(function() {
var trueValues = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var values = [0, 1, 2, 3, 4, 5, 6, 7, 10, 15, 20, 25, 30, 40, 50, 60, 75, 100];
var slider = $("#price-range").slider({
orientation: 'horizontal',
range: true,
min: 0,
max: 100,
values: [0, 100],
slide: function(event, ui) {
var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
var includeRight = event.keyCode != $.ui.keyCode.LEFT;
var value = findNearest(includeLeft, includeRight, ui.value);
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}
else {
slider.slider('values', 1, value);
}
$("#price-amount").html('$' + getRealValue(slider.slider('values', 0)) + ' - $' + getRealValue(slider.slider('values', 1)));
return false;
},
change: function(event, ui) {
getHomeListings();
}
});
function findNearest(includeLeft, includeRight, value) {
var nearest = null;
var diff = null;
for (var i = 0; i < values.length; i++) {
if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
var newDiff = Math.abs(value - values[i]);
if (diff == null || newDiff < diff) {
nearest = values[i];
diff = newDiff;
}
}
}
return nearest;
}
function getRealValue(sliderValue) {
for (var i = 0; i < values.length; i++) {
if (values[i] >= sliderValue) {
return trueValues[i];
}
}
return 0;
}
});
Вы можете возиться с числами в массиве values (которые представляют точки остановки ползунка), пока вы не разметите их так, как вам нужно. Таким образом, вы можете почувствовать, с точки зрения пользователя, что он скользит пропорционально значениям, но без преувеличения. Очевидно, что если ваши истинные значения создаются динамически, вам может потребоваться алгоритм создания значений ползунка вместо статического их определения ...