Question

我想在项目中添加带有条件步长值的Jquery Slider

最小值为1，最大值为100。

我希望将Step值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);
});

在jQuery Slider中动态更改Step值

1 个答案: