Не уверен, что если вы хотите, чтобы масштаб ползунка быть в пропорции к вашим ценностям *, но если это так, Я предоставил решение для этого другого, кто задал тот же вопрос. You can find my solution here. В основном я использую событие slide, которое запускается, когда вы перемещаете ползунок, чтобы имитировать степпинг, но основываясь на настраиваемом массиве, определяющем этапы. Таким образом, он позволяет вам «переходить» к вашим предопределенным значениям, даже если они не распределены равномерно.
* Другими словами, если вы хотите, чтобы ваш слайдер выглядеть следующим образом:
|----|----|----|----|----|----|----|
0 10 20 100 1000 2000 10000 20000
затем с одним из других решений здесь, но если вы хотите, чтобы ваш слайдер выглядеть следующим образом (схема не в масштабе):
|--|--|-------|-----------|-----------|--------------------|--------------------|
0 10 20 100 1000 2000 10000 20000
Тогда решение, с которым я связан, может быть больше того, что вам нужно.
Edit: Ok, эта версия сценария должна работать с двумя ползунками:
$(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;
}
});
Обратите внимание, что это выглядит немного смешно вниз до левого конца, так как скачки так близко вместе с правой рукой, но вы можете увидеть его шаг по желанию, если вы используете стрелки клавиатуры для перемещения ползунка. Единственный способ обойти это - изменить масштаб, чтобы он не был настолько резко экспоненциальным.
Edit 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 массиве (которые представляют собой точки слайдера стоп), пока вы не получите их на расстоянии, как вы хотите.Таким образом, вы можете почувствовать, с точки зрения пользователя, как будто он скользит пропорционально значениям, но не преувеличен. Очевидно, что если ваши истинные значения динамически создаются, вам может потребоваться алгоритм генерации значений ползунка вместо статического определения их ...
@Alconja - Ваш нижний пример выглядит отлично, но я не верю, что он работает, если я использую двойную ручку (диапазон ползунков). Правильно ли, если да, как бы я изменил ваш код, чтобы сделать эту работу? Большое спасибо –
@Alconja - Также, это работает с функциональностью «привязка к сетке»? Это не так. –
@TomHankers - «привязка к сетке» должна работать (это было, когда я построил другой пример), и в настоящее время он не работает с двумя ручками, но я посмотрю на это для вас ... – Alconja