Change Step value dynamically in jQuery Slider

Question

I want to add Jquery Slider with conditional step value in my project

It has minimum value 1 and maximum 100.

I want to keep Step value 1 up to slide 0 to 50 but when the slide value goes beyond 50 the step value should be 2 (Slider will increase like 48,49,50,52,54,56.........)?

How can I implement ?

This is my code

         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;
                }
            }

        });

Thanks in advance.

Answer 1

Here is a non-elegant FIDDLE that does what you want it to do.

It is general, so you can put in any maximum value, and any cutpoint and it will give you an even number above the cutpoint.

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);
});