Динамическое изменение значения шага в jQuery Slider

Question

Я хочу добавить Jquery Slider с условным значением шага в моем проекте

Он имеет минимальное значение 1 и максимум 100.

Я хочу сохранить значение шага 1 до уровня от 0 до 50, но когда значение слайда превышает 50, значение шага должно быть равно 2 (ползунок будет увеличиваться как 48,49,50,52,54,56.........)?

Как я могу реализовать?

Это мой код

         this.slider = container.slider({
            animate: true,
            range: "min",
            orientation: "horizontal",
            value: self.minBet,
            max: self.maxBet,
            min: 0,
            step: self.step,  // self.step=1

            slide : function(event,ui) {
                if(self.triggerChange == true) {

                    // Here I want to chenge value of step.
                    // here self.step =1
                    // Now, If ui.value is more than 50 than step will be 2
                    self.handleChangeValue(self.slider,ui.value);
                }
            },

            change: function(event, ui) {
                if(self.triggerChange==true) {
                    self.handleChangeValue(self.slider,ui.value);
                } else {
                    self.triggerChange = true;
                }
            }

        });

Заранее спасибо.

Answer 1

Вот не элегантный FIDDLE, который делает то, что вы хотите.

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

JS

$('#clickme').on('click', function(){

    var slidervalue = $('#inputme').val();

    var maxvalue = 100;
    var minvalue = 0;
    var cutpoint = 50;
    var finalvalue = 0;


    if (slidervalue > 100)
    {
     slidervalue = 100;
    }
    if (slidervalue < 0)
    {
     slidervalue = 0;
    }

    if (slidervalue <= cutpoint)
    {
     finalvalue = slidervalue;
     }
      else
    {
      if( slidervalue%2 == 0 )
      {
        finalvalue = slidervalue;
       }
        else
        {
         finalvalue = 1 + +slidervalue;
         if( finalvalue > 100 )
           {
            finalvalue = 100;
            }
        }
    }
    $('.putmehere').html(finalvalue);
});