jquery - 在 jQuery Slider 中动态更改 Step 值

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