Как установить значение слайдера динамически?

Question

[fuzz1on]

Есть код

$( "#slider-range-max" ).slider({<br>
      range: "max",<br>
      min: 1,<br>
<br>
      max:61,<br>
 <br>
      value: 1,<br>
      step: 1,<br>
      slide: function( event, ui ) {<br>
          <br>
        var val = ui.value;<br>
         <br>
        if(val > 10){<br>
           <br>
         ui.value = ui.value + 3;<br>
          <br>
<br>
          $( "#amount" ).val(ui.value);<br>
         <br>
          <br>
           <br>
      //   $(this).slider('option','max',500);<br>
       <br>
         <br>
    }<br>
     else {  $( "#amount" ).val( ui.value); <br>
    }

Вывод в текстовое поле получается вида 9, 10, 13, 14, 15. ЧЯДНТ?



Причем если заменить ui.value = ui.value + 3; на ui.value = ui.value * ui.value; вывод получается следующим 9, 121, 144, 169, 196…

Comments

[deleted-mifki]

а что не так-то?

Answer 1

[Artem Moseev]

Тогда

          var valueShow;
          if(ui.value>10){
              valueShow=10 + (ui.value-10)*3 ;
          }else{
              valueShow=ui.value;
          }
          $( "#amount" ).val(valueShow);

Comments

[fuzz1on]

Огромное спасибо!

Answer 2

[fuzz1on]

нужен вывод вида 9, 10, 13, 16, 19, 22

Comments

[Alexey Kamchatkin]

а в чем отличие вывода 9,121,144 от 9,10,13,16,19,22?

[fuzz1on]

Простите, видимо Вы меня неправильно поняли.

Дело в том, что ui.value = ui.value * ui.value; дает ожидаемый результат (квадрат текущего значения слайдера), как мне организовать вывод вида
8,9,10,13,16,19...?
При ui.value = ui.value + 3 вывод получается следующим: 8,9,10,13,14,15,16…

Answer 3

[Anton Bobylev]

$(function() {
    $( "#slider-range-max" ).slider({
      range: "max",
      min: 1,
      max: 61,
      value: 1,
      slide: function( event, ui ) {
          if( ui.value >= 10) {
              $( this ).slider( "option", "step", 3 );
          }
          else {
              $( this ).slider( "option", "step", 1 );  
          }
          $( "#amount" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  });

jsfiddle.net/Mrfun/3/

Comments

[fuzz1on]

Спасибо, но для меня важно, что бы шаг значений слайдера оставался неизменным. По сути, мне важно что бы в текстовое поле выводилось 13, 16, 19… При этом менять «настоящее» значение слайдера (ui.value) необязательно.

[Artem Moseev]

Если у вас проблема именно в вычислении того, что показать… jsfiddle.net/DaH9k/
Но логичнее пример dpigo с изменением шага слайдера.

[fuzz1on]

Безусловно, в этом отношении его решение проблемы логичнее, но! Мне необходимо не изменяя шаг деления получить результат вида 9,10,13,16… Т.е
если в вашем примере при передвигании ползунка с 10 до 13 значение не меняется, то мне нужно, что бы на каждый шаг значение текстового поля менялось. Т.е вместо вашего примера 10 null null 13 мне надо 10 13 16 19 в текстовом поле (надеюсь понятно выразился)

[Artem Moseev]

valueShow=ui.value - (ui.value % 3) +1 ;
console.log( "  uiVal="+ui.value+  "  uiVal %3 ="+ (ui.value % 3)  +"  valShow="+valueShow);

Вычисляются все значения, не понимаю откуда у вас берутся null.
Консоль выводит ожидаемое:
uiVal=11 uiVal %3 =2 valShow=10
uiVal=12 uiVal %3 =0 valShow=13
uiVal=13 uiVal %3 =1 valShow=13
uiVal=14 uiVal %3 =2 valShow=13
uiVal=15 uiVal %3 =0 valShow=16
uiVal=16 uiVal %3 =1 valShow=16
uiVal=17 uiVal %3 =2 valShow=16
uiVal=18 uiVal %3 =0 valShow=19
uiVal=19 uiVal %3 =1 valShow=19

[fuzz1on]

ок, мне надо так
uiVal=11 uiVal %3 =2 valShow=10
uiVal=12 uiVal %3 =0 valShow=13
uiVal=13 uiVal %3 =1 valShow=16
uiVal=14 uiVal %3 =2 valShow=19
uiVal=15 uiVal %3 =0 valShow=22
uiVal=16 uiVal %3 =1 valShow=25
uiVal=17 uiVal %3 =2 valShow=28
uiVal=18 uiVal %3 =0 valShow=31
uiVal=19 uiVal %3 =1 valShow=34