JQuery UI Slider изменение параметра step?

Question

[Илья Шабанов]

Столкнулся с такой проблемой нужно сделать слайдер с шагом 60, но первый шаг должен быть 30 (т.е. 30 60 120 180… ), вот как я это делаю:

$('#id').slider({<br>
	min: 30,<br>
	max: 720,<br>
	value: 30,<br>
	step: 30,<br>
	change: function (event, ui) {<br>
		console.log('change1 '+$(this).slider("value")+' step'+$(this).slider('option', 'step'))<br>
		if ( $(this).slider("value") > 60 ) {<br>
			newStep = 60<br>
			$(this).slider('option', 'step', newStep);<br>
			//slider_step = newStep<br>
		}<br>
		console.log('change2 '+$(this).slider("value")+' step'+$(this).slider('option', 'step'))<br>
	}<br>
})

после того как мы меняем параметр step на 60 value становится 90, при последующих изменениях слайдер ведет себя как и ожидается 90 > 150 210 270… изменяю значения слайдера простой кнопкой:

$('#btn').click(function(e){<br>
	var	step = $('#id').slider('option','step'),<br>
		value = $('#id').slider('value')<br>
	$('#id').slider('value', value+step)<br>
}

Я в замешательстве и не могу понять почему так происходит?



console.log():

step=60

change1 60 step30<br>
change2 90 step60

step=61

change1 60 step30<br>
change2 30 step61

step=59

change1 60 step30<br>
change2 89 step59

step=29

change1 60 step30<br>
change2 59 step29

Answer 1

[Илья Шабанов]

похоже что придется сделать так stackoverflow.com/questions/7267676/jquery-slider-ui-dynamic-step-size но тогда нужно будет забивать все значения вручную

Answer 2

[wscms]

А если step вы берете как
step = $('#id').slider('option','step')
то value не подобным ли образом надо брать?
value = $('#id').slider('option', 'value')

Comments

[Илья Шабанов]

нет

[wscms]

jqueryui.com/demos/slider/#option-value говорит, что таки да
Get or set the value option, after init.
//getter
var value = $( ".selector" ).slider( «option», «value» );
//setter
$( ".selector" ).slider( «option», «value», 37 );

[Илья Шабанов]

ну значит можно и так и так, умеряю вас проблема не в этом jQuery UI Slider / Methods

Answer 3

[abrukish]

Я бы попробовал вынести логику из change в клик по кнопке.

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

$('#id').slider({
min: 30,
max: 720,
value: 30,
step: 60
})


Сама кнопка с на один раз проверкой:

$('#btn').click(function(e){
var step = $('#id').slider('option','step'), value = $('#id').slider('value');

if ( value < 60 )
step = 30;

$('#id').slider('value', value+step);
}

Comments

[abrukish]

Прошу прощения, проверить нет возможности :(

[abrukish]

Предыдущий вариант врядли что-то решит, т.к. бесполезен :)

1. $('#id').slider({
2.   min: 30,
3.   max: 720,
4.   value: 30,
5.   step: 60,
6.   change: function (event, ui) {
7.     console.log('change1 '+$(this).slider("value")+' step'+$(this).slider('option', 'step'));
8.     if ( $(this).slider("value") < 60 ) {
9.       var value = $(this).slider("value");
10.       $(this).slider("value", value + 30);  
11.       return false;
12.     }
13.     console.log('change2 '+$(this).slider("value")+' step'+$(this).slider('option', 'step'));
14.   }
15. })

* This source code was highlighted with Source Code Highlighter.

[Илья Шабанов]

Спасибо за помощь, но я скорее всего сделаю так как сделано ссылкой выше на stackoverflow потому как кроме эвента change нужно будет сделать еще и тоже самое для slide а там свои подводные камни…

Answer 4

[Алексей Прохоров]

Как было сказано выше, тут только вручную задавать значения
$('#id').slider({
    min: 30,
    max: 720,
    value: 30,
    step: 30,
    slide: function (event, ui) {
        if (ui.value > 30 && ui.value % 60 != 0) {
            $(this).slider("value", ui.value + 30);
                return false;
        }
    }
});