Intereting Posts

JQuery Slider, как resize шага

Можно ли использовать ползунок JQuery (слайдер диапазона / двойной слайдер), чтобы иметь нелинейные (непоследовательные) значения шага?

Я хочу, чтобы горизонтальный слайдер выглядел так:

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

Например, я хочу иметь следующий код JQuery:

 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)) { var newDiff = Math.abs(value - values[i]); if (diff == null || newDiff < diff) { nearest = values[i]; diff = newDiff; } } } return nearest; } 

Код выше не работает точно, но функциональность привязки к сетке не работает.

    Не уверен, хотите ли вы, чтобы шкала слайдера была пропорциональна вашим значениям *, но если это так, я предоставил решение для этого другого, кто задал тот же вопрос. Вы можете найти мое решение здесь . В основном я использую событие slide которое запускается, когда вы перемещаете ползунок, чтобы имитировать степпинг, но основываясь на настраиваемом массиве, определяющем этапы. Таким образом, он позволяет вам «переходить» к вашим предопределенным значениям, даже если они не распределены равномерно.

    * Другими словами, если вы хотите, чтобы ваш слайдер выглядел следующим образом:

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

    затем перейдите к одному из других решений здесь, но если вы хотите, чтобы ваш слайдер выглядел так (диаграмма не масштабируется):

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

    Тогда решение, с которым я связан, может быть больше того, что вам нужно.


    Edit: Хорошо, эта версия скрипта должна работать с двумя слайдерами:

     $(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: 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 (которые представляют точки остановки ползунка), пока вы не разберетесь, как вы хотите. Таким образом, вы можете почувствовать, с точки зрения пользователя, как будто он скользит пропорционально значениям, но не преувеличен. Очевидно, что если ваши истинные значения динамически создаются, вам может потребоваться разработать алгоритм для генерации значений ползунка вместо статического определения их ...

    HTML:

      

    Slider Value:
    Nonlinear Value:

    JS:

      $(function() { var valMap = [0, 25,30,50,55,55,60,100]; $("#slider").slider({ // min: 0, max: valMap.length - 1, slide: function(event, ui) { $("#val").text(ui.value); $("#nlVal").text(valMap[ui.value]); } }); }); 

    Один из вариантов для вас – использовать размер шага один и ссылаться на массив, содержащий ваши выбранные значения. Начните с 0, перейдите к 20, получите массив [value_of_slider], чтобы получить свое фактическое значение. Я не знаю ползунков достаточно хорошо, чтобы рассказать вам, есть ли способ дать ему настраиваемый набор значений.

    Основываясь на приведенном выше ответе и обсуждении от @Seburdis и используя имена из вашего примера:

     var prices_array = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200, 250, 500, 1000, 1500, 2000, 2500, 5000, 10000]; function imSliding(event,ui) { //update the amount by fetching the value in the value_array at index ui.value $('#amount').val('$' + prices_arr[ui.value] + ' - $' + prices_arr[prices_arr.length - 1]); } $('#slider-interval').slider({ min:0, max:values_arr.length - 1, slide: imSliding}); 

    Я думаю, что я могу предложить лучшее решение: идея состоит в том, чтобы сохранить массив с моими реальными значениями, кроме слайдера, а затем установить атрибут step всегда равным 1 и позволить слайдеру работать с index этого массива, а затем извлекать реальный значение из моего реального массива данных. Надеюсь, что этот пример помогает: http://jsfiddle.net/3B3tt/3/

    Кто-то разместил это на веб-сайте jQuery. Видеть:

    http://forum.jquery.com/topic/non-linear-logarithmic-or-exponential-scale-for-slider

    а также

    http://jsbin.com/ezema

    Это именно то, что у вас есть, но путь проще (например, 1 строка кода).

    вот как я сделал свое. демо здесь – http://janpatricklara.com/web/extra/jQueryUISliderUnevenSteps.html

    иметь массив желаемых значений

     var amts=[50,100,150,200,225,250,300]; 

    имеют приращение ползунка от 0 до длины массива, с шагом 1. выведите значение из индекса массива вместо фактического значения ползунка.

    таким образом, приращения и шаги распределяются равномерно. после этого вы можете просто захватить значение метки или сохранить его в var.

     $('#amtslider').slider({ min:0, max:amts.length-1, step:1, value:0, change:function(event, ui){ //alert(amts[$(this).slider("value")]); //alert($(this).slider("value")); $('#lbl_amt').val(amts[$(this).slider("value")]); }, slide:function(event, ui){ $('#lbl_amt').val(amts[$(this).slider("value")]); } }); 

    Вот мое простое решение для пользовательского (несовпадающего) шагового размера с двумя слайдерами (вы можете изменить его на один слайдер, если идея станет понятной), мой слайдер называется «слайдер-евро», текстовая область названный сумма-евро, как вы можете видеть в коде. Идея состоит в том, чтобы иметь ползунок от 0 до 100 и массив («realvalues») с 101 местом. Значение ползунка понимается как место в этом массиве. Единственное, что вы должны ссылаться на массив, когда вы получаете значения ползунка. Вот мой пример:

      $(function() { var realvalues = [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000, 55000, 60000, 65000, 70000, 75000, 80000, 85000, 90000, 95000, 100000, 105000, 110000, 115000, 120000, 125000, 130000, 135000, 140000, 145000, 150000, 155000, 160000, 165000, 170000, 175000, 180000, 185000, 190000, 195000, 200000, 205000, 210000, 215000, 220000, 225000, 230000, 235000, 240000, 245000, 250000, 255000, 260000, 265000, 270000, 275000, 280000, 285000, 290000, 295000, 300000, 310000, 320000, 330000, 340000, 350000, 360000, 370000, 380000, 390000, 400000, 450000, 500000, 550000, 600000, 650000, 700000, 750000, 800000, 850000, 900000, 1000000, 1500000, 2000000]; $( "#slider-euro" ).slider({ range: true, min: 0, max: 100, step: 1, values: [ 25, 50 ], slide: function( event, ui ) { $( "#amount-euro" ).val( realvalues[ui.values[ 0 ]] + " € - " + realvalues[ui.values[ 1 ]] + " €"); } }); $( "#amount-euro" ).val( realvalues[$( "#slider-euro" ).slider( "values", 0 )] + " € - " + realvalues[$( "#slider-euro" ).slider( "values", 1 )]+" €" ); }); 

    если значения min и max одинаковы, значение ползунка не изменяется

    изменить эту часть

      if (ui.value == ui.values[0]) { slider.slider('values', 0, value); } else { slider.slider('values', 1, value); } 

    в

      if ( ui.values[0] == ui.values[1] ) { slider.slider('values', 0, value); slider.slider('values', 1, value); }else{ if (ui.value == ui.values[0]) { slider.slider('values', 0, value); }else { slider.slider('values', 1, value); } } 

    Я должен был сделать что-то подобное, и хотя это поздний ответ, кто-то еще может произойти в этой теме так же, как и я, и найти мое решение полезным. Вот решение, которое я создал:

    http://jsfiddle.net/YDWdu/

     So apparently, postings containing links to jsfiddle "must be accompanied by code". OK - here ya go, stackoverflow... Some lovely "code" for you. 

    Просто измените значения.

     $( "#price-range" ).slider({ range: true, min: 1000, max: 300000000, /*step:1,*/ values: [ 1000, 300000000 ], slide: function( event, ui ) { if(ui.values[0]<=100000 && ui.values[1]<=100000){ $("#price-range").slider({step:10000}); }else if(ui.values[0]<=300000 && ui.values[1]<=300000){ $("#price-range").slider({step:25000}); }else if(ui.values[0]<=1000000 && ui.values[1]<=1000000){ $("#price-range").slider({step:50000}); }else if(ui.values[0]<=2000000 && ui.values[1]<=2000000){ $("#price-range").slider({step:100000}); }else if(ui.values[0]<=5000000 && ui.values[1]<=5000000){ $("#price-range").slider({step:250000}); }else if(ui.values[0]<=10000000 && ui.values[1]<=10000000){ $("#price-range").slider({step:500000}); }else if(ui.values[0]<=20000000 && ui.values[1]<=20000000){ $("#price-range").slider({step:1000000}); }else if(ui.values[0]<=50000000 && ui.values[1]<=50000000){ $("#price-range").slider({step:5000000}); }else if(ui.values[0]<=50000000 && ui.values[1]<=50000000){ $("#price-range").slider({step:10000000}); }else if(ui.values[0]<=200000000 && ui.values[1]<=200000000){ $("#price-range").slider({step:25000000}); }else{ $("#price-range").slider({step:100000000}); } $("#mins").val( ui.values[0] ); $("#maxs").val( ui.values[1] ); } }); 

    В дополнение к jsfiddle @ Broshi выше, вот код для пользовательского слайдера с отключенным диапазоном:

    JQuery:

     var myData = [1,2,3,4,5,6,7,8,9,10,20,30,40,50,60,70,80,90,100,200,300,400,500,600,700,800,900,1000,2000,3000,4000,5000,10000,20000,30000,50000,100000,200000,500000,1000000,20000000,30000000]; slider_config = { range: false, min: 0, max: myData.length - 1, step: 1, slide: function( event, ui ) { // Set the real value into the inputs console.log(ui); $('#value').val( myData[ ui.value ] ); }, create: function() { $(this).slider('value',0); } }; $("#slider").slider(slider_config); 

    HTML: