Wenn Sie den Schieberegler maßstabsgetreu zu Ihren Werten haben möchten *, habe ich eine Lösung dafür bereitgestellt, als jemand anderes dieselbe Frage gestellt hat. Hier finden Sie meine Lösung. Ich mache im Grunde Gebrauch vom slide Ereignis, das ausgelöst wird, wenn Sie den Schieberegler bewegen, um das Schrittverhalten zu imitieren, jedoch basierend auf einem benutzerdefinierten Array, das die Schritte definiert. Auf diese Weise wird es Ihnen nur erlauben, zu Ihren vordefinierten Werten zu "schreiten", auch wenn sie nicht gleichmäßig verteilt sind.
*Mit anderen Worten, wenn Sie möchten, dass Ihr Schieberegler so aussieht:
|----|----|----|----|----|----|----|
0 10 20 100 1000 2000 10000 20000
dann verwenden Sie eine der anderen Lösungen hier, aber wenn Sie möchten, dass Ihr Schieberegler so aussieht (Diagramm nicht maßstabsgetreu):
|--|--|-------|-----------|-----------|--------------------|--------------------|
0 10 20 100 1000 2000 10000 20000
Dann könnte die Lösung, auf die ich verlinkt habe, eher das sein, was Sie suchen.
Bearbeiten: Ok, diese Version des Skripts sollte mit doppelten Schiebereglern funktionieren:
$(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;
}
});
Beachten Sie, dass es am äußersten linken Ende etwas seltsam aussieht, da die Sprünge im Vergleich zum rechten Ende so nah beieinander liegen, aber Sie können sehen, dass es wie gewünscht schrittweise erfolgt, wenn Sie die Pfeiltasten Ihrer Tastatur verwenden, um den Schieberegler zu bewegen. Der einzige Weg, um das zu umgehen, besteht darin, Ihre Skala nicht so drastisch exponentiell zu ändern.
Bearbeiten 2: Wenn der Abstand zu stark übertrieben ist, wenn Sie die eigentlichen Werte verwenden, könnten Sie eine Reihe gefälschter Werte für den Schieberegler verwenden und dann den realen Wert herausfinden, der diesem entspricht, wenn Sie den realen Wert verwenden müssen (auf ähnliche Weise wie die anderen Lösungen hier vorgeschlagen haben). Hier ist der Code:
$(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;
}
});
Sie können mit den Zahlen im values Array (die die Schieberegler-Stoppunkte darstellen) experimentieren, bis Sie sie so aufteilen, wie Sie es möchten. Auf diese Weise können Sie das Gefühl vermitteln, dass der Schieberegler aus der Sicht des Benutzers proportional zu den Werten gleitet, ohne dabei so übertrieben zu sein. Offensichtlich, wenn Ihre wahren Werte dynamisch erstellt werden, müssen Sie möglicherweise einen Algorithmus entwickeln, um die Schiebereglerwerte zu generieren, anstatt sie statisch zu definieren...
