Сообщений в теме: 9

[al2401]

Добрый день, подскажите как сделать слайдер, чтобы значения слайдера менялись на линейно, а в геометрической прогрессии.

 

есть такой пример, помогите прикрутить к jbzoo 

var resStepValues =  [ 0 ,  . 01 ,  . 02 ,  . 03 ,  . 04 ,  . 05 ,  1 ,  1.5 ,  2 ,  3 ,  4 ,  5 ,  10 ,  20 ,  30 ,  40 ,  50 ,  60 ,  70 ,  80 ,  90 ,  100 ,  150 ,  200 ,  250 ,  300 ,  500 ,  750 ,  1000 ,  1500 ];

var slider = $ ( "#resolution_slider" ). slider ({ 
    animate :  true , 
    min :  0 , 
    max :  29 , 
    range :  'min' , 
    values :  [ 0 ,  29 ], 
    slide :  function  ( event , ui )  {

        if  ( ui . values [ 0 ]  > ui . values [ 1 ])  { 
            $ ( "#txtMaxRes" ). val ( resStepValues [ ui . values [ 1 ]]); 
            $ ( "#txtMinRes" ). val ( resStepValues [ ui . values [ 0 ]]);

        }  else  { 
            $ ( "#txtMaxRes" ). val ( resStepValues [ ui . values [ 0 ]]); 
            $ ( "#txtMinRes" ). val ( resStepValues [ ui . values [ 1 ]]); 
        } 
    }

});

[SmetDenis]

Слайдер сделан на основе jQuery UI Slider

Боюсь, что у него нет такой возможности.

 

Если только как нибудь через событие http://api.jqueryui....r/#event-change

[al2401]

Денис можете посмотреть, подсказать что не так, делал по примеру через событие, но не работает

var resStepValues =  [ 0,.01,.02,.03,.04,.05,1,1.5,2,3,4,5,10,20,30,40,50,60,70,80,90,100,150,200,250,300,500,750,1000,1500,10000,100000,500000,1000000,5000000,25000000,50000000,100000000 ];

$("#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-wrapper").slider({change: function( event, ui ) {}});
$("#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-wrapper").on( "slidechange", function( event, ui ) 
{
  if ($("#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-value").val(ui.values [0]) > $("#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-value").val(ui.values [1]))  
  { 
    $( "#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-value" ).val ( resStepValues [ ui.values [ 1 ]]); 
    $( "#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-value" ).val ( resStepValues [ ui.values [ 0 ]]);
  }  else  {
    $ ( "#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-value" ).val ( resStepValues [ ui.values [ 0 ]]); 
    $ ( "#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-value" ).val ( resStepValues [ ui.values [ 1 ]]); 
  } 
}); 

[SmetDenis]

А есть ссылка, чтобы посмотреть?

[al2401]

Извиняюсь, вчера вырубили инет, не смог ответить, вот ссылка http://commerce.961-961.ru/sale

 

В админке для слайдера цены установил макс значение 13, шаг 1,

в скрипте создан массив из 13 значений

var resStepValues =  [ 100000,300000,500000,1000000,2000000,3000000,5000000,10000000,15000000,20000000,50000000,100000000,150000000,200000000 ];

В событии change берется значение из слайдера и заменяется значением из массива (например слайдер 3 соответственно из массива 1000000)

 

Пробовал разные варианты, событие как будто не отрабатывает.

[al2401]

Частично получилось, нужно обрабатывать событие "slide", проблема в том, что после поиска ползункам требуется присвоить значения в соответствии с порядковым номером в массиве (т.е. если поиск был по диапазону 500000 - 3000000, то ползункам присваиваем значения 2 - 5), но какое событие обрабатывать не понятно, событие "create" не срабатывает.

$wrapper = $('#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-wrapper').closest('.field');
var sl = $('.ui-slider', $wrapper).data('slider'); // получаем объект слайдера
//событие при перемещении слайдера
$("#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-wrapper").slider({slide: function( event, ui ) 
	{
		var v0 = $('#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-wrapper').slider("values",0);
		var v1 = $('#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-wrapper').slider("values",1);					
		$('.slider-value-0', $wrapper).html(resStepValues [v0]);
		$('.slider-value-1', $wrapper).html(resStepValues [v1]);
		$('[type=hidden][name*="range"]', $wrapper).val(resStepValues [v0] + '/' + resStepValues [v1]);
	}
});

[al2401]

Вот вполне рабочий вариант, но проблема та же после поиска ползунки восстанавливаются в позиции как при линейном смещении, ссылка http://commerce.961-961.ru/sale (слайдер цены)

Math.easeIn = function (val, min, max, strength) 
{
	val /= max;	return (max-1)*Math.pow(val, strength) + min;
};
$("#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-wrapper").slider({slide: function( event, ui ) 
    {
	var s0 = $('#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-wrapper').slider("values",0);
	var s1 = $('#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-wrapper').slider("values",1);	

	var v0 = Math.round(Math.easeIn(s0, 1, 200000000, 7));
	var v1 = Math.round(Math.easeIn(s1, 1, 200000000, 7));
	$('.slider-value-0', $wrapper).html(v0);
	$('.slider-value-1', $wrapper).html(v1);
	$("#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-value-0").html(numberFormat(v0, 0, ".", " "));
	$("#filterEl_adcfefe4-11cb-4d0e-b9a4-e72891478247-range-1-value-1").html(numberFormat(v1, 0, ".", " "));					
	$('[type=hidden][name*="range"]', $wrapper).val(v0 + '/' + v1);
    }
});

[SmetDenis]

Откровенно говоря не знаю чем вам помочь, т.к так глубоко не лазил в слайдер.

 

По идее второй вариант среди этих должен работать верно http://pastebin.com/5Lsw3QWV

Т.е кол-во шагов в слайдере должно соответствовать массиву значений.

 

В вашем варианте можно применить "костыльный" метод, установки нажных начальных значений по небольшому таймауту после загрузки страницы.

[SmetDenis]

Нашел еще один интересный альтернативный метод

http://www.concrete5...-greater-range/

[al2401]

Денис спасибо, попробовал через событие "$(window).load(function () {" отрабатывает нормально после загрузки страницы, но все равно ползунки на место не смог поставить, в общем пока заменю слайдер на диапазон полей.