スライダーのスケールを値に比例させたいかどうかはわかりません*が、もしそうなら、同じ質問をした他の誰かにこれに対する解決策を提供しました. ここで私の解決策を見つけることができます。基本的にはslide、スライダーを動かしてステップを模倣するときにトリガーされるイベントを利用しますが、ステップを定義するカスタム配列に基づいています。このようにして、均等に分散されていなくても、定義済みの値に「ステップ」することしかできません。
*つまり、スライダーを次のように表示する場合:
|----|----|----|----|----|----|----|
0 10 20 100 1000 2000 10000 20000
次に、ここで他のソリューションのいずれかを使用しますが、スライダーを次のように表示する場合 (図は縮尺どおりではありません):
|--|--|-------|-----------|-----------|--------------------|--------------------|
0 10 20 100 1000 2000 10000 20000
次に、私がリンクしたソリューションは、あなたが求めているもの以上のものかもしれません.
編集: 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;
}
});
右端に比べてジャンプが非常に接近しているため、左端では少しおかしく見えることに注意してください。これを回避する唯一の方法は、スケールを大幅に指数関数的にならないように変更することです。
編集 2:
OK、真の値を使用するときに間隔が誇張されすぎている場合は、スライダーに一連の偽の値を使用してから、実際の値を使用する必要がある場合に対応する実際の値を検索できます (ここで提案されている他のソリューションと同様の方法)。コードは次のとおりです。
$(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(スライダーの停止点を表す) をいじって、必要な間隔を空けることができます。このようにして、ユーザーの視点から、値に比例してスライドしているように感じさせることができますが、誇張することはありません。明らかに、真の値が動的に作成される場合は、静的に定義するのではなく、スライダーの値を生成するアルゴリズムを考え出す必要があるかもしれません...