更改步长值动态jQuery的滑块

Question

我想在我的项目中添加jQuery的滑块有条件的步长值

它的最小值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); 
});