Doğrusal olmayan "" boyutu) değerleri adım? (sigara tutarlı olması için JQuery Kaymak (dizi kaymak / dual slider) kullanmak mümkün

Gibi görünmek için yatay Kaydırma yapmak istiyorum:

|----|----|----|----|----|--------|--------|-------------------------|--------------------------|...
0   500  750  1000  1250 1500     2000     2500                      75000                      100000...

Örneğin, aşağıdaki JQuery kodu vermek istiyorum:

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;
			slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value));
			$("#price-amount").html('$'   ui.values[0]   ' - $'   ui.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;
}

Yukarıdaki kod tam olarak çalışmıyor ama kılavuz işlevi için ek işe yaramıyor.

Eğer kaydırma ölçek değerleri ile orantılı olmasını istiyorsanız, emin* ama eğer öyleyse, aynı soruyu soran başka biri için bu bir çözüm sağlanmış değil. You can find my solution here. Temelde kaydırıcı adım taklit taşıdığınızda tetiklenen alır slide olay kullandım, ama özel bir dizi adımları tanımlama kapalı tabanlı. Sadece senin izin bu yol için "adım yayılır, onlar bile" önceden tanımlanmış değerleri,.

Eğer bu kaymak gibi görünmek istiyorsanız başka bir deyişle*:

|----|----|----|----|----|----|----|
0   10   20  100  1000 2000 10000 20000

eğer bu kaymak gibi görünmek istiyorsanız o zaman başka çözümler burada biri ile gitmek, ama (ölçekli değil diyagramı):

|--|--|-------|-----------|-----------|--------------------|--------------------|
0 10 20     100         1000        2000               10000                20000

O zaman ben bağlantılı çözüm peşinde olduğunuz şey daha olabilir.

Düzenleme:Tamam, programın bu sürümü çift sürgü ile çalışması gerekir:

$(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;
    }
});

Not görünen o ki biraz komik aşağı soldaki sona ermesinden bu yana atlar çok yakın birbirine göre sağ el son, ama onun adım olarak isterseniz kullandığınız klavye okları için kaydırıcıyı hareket ettirin. Büyük ölçüde üstel bu kadar değil ölçek değiştirmek için olduğunu aşmanın tek yolu.

Edit 2: Tamam, eğer boşluk çok abartılı kullandığınızda gerçek değerleri, geçer bir dizi sahte değerler için kaydırıcıyı ve sonra etrafıma bakıp gerçek değeri bu karşılık ihtiyacın olduğunda kullanmak için gerçek değer (benzer şekilde, ne başka çözümler burada önerilen). İşte kod:

$(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;
    }
});

İstediğiniz şekilde dışarı aralıklı elde edene kadar values dizideki numaraları ile keman slider Durdur noktalarını temsil eder). Bu şekilde abartılı olmadan değerleri için, ama kısmen kayıyor gibi hissediyorum, kullanıcının bakış açısıyla yapabilirsiniz. Eğer gerçek değerler dinamik olarak oluşturulur varsa, büyük ihtimalle statik olarak tanımlamak yerine kaydırma değerleri oluşturmak için bir algoritma ile gelmek gerekir...