Javascript 滑块上带有加号和减号按钮的noUIslider调整

是否有人将锚定标签作为加减函数包含在noUIslider的滑块上以增加和减少您的值？我还没有发现任何与使用noUIslider相关的东西，但我希望有人以前做过。我有一个例子，我的一个滑块，当他们在下面创建

qdata['calc-rate'] = {value:4,type:"percent",decimals:3,post:"%",interface:"slider",min:0,max:10,inc:.125,label:'Interest Rate',display:''};
  var f = qdata['calc-rate'];
  var val = f['value'];
  var sliderInterest = document.getElementById("paymentSliderInterest");
    noUiSlider.create(sliderInterest, {
      start:val,
      behaviour:'tap',
      range:{'min':0,'max':10},
      connect:"lower",
      step:f.inc,
      format: wNumb({decimals: f.decimals})
    });
  sliderInterest.noUiSlider.on('slide', setInterestSliderDisplay);

您可以使用文档中的，但将事件从按键更改为单击按钮

它使用

步骤

选项获取下一步和上一步：

button.addEventListener('click', function( e ) {

    var values = keypressSlider.noUiSlider.get();
    var value = Number(values[handle]);

    // [[handle0_down, handle0_up], [handle1_down, handle1_up]]
    var steps = keypressSlider.noUiSlider.steps();

    // [down, up]
    var step = steps[handle];

    // set slider
    // ...
});

功能增量滑块（e）{
//使用加号和减号按钮更改滑块速率值
如果（e）{e.preventDefault（）；}
var f=qdata[‘计算利率’]；
var id=$（this.attr（“id”）；
var-dir=1；
如果（id==“leftCircleRate”）{dir=-1；}
//console.log（f.value）；
var newval=+f.value++（dir*f.inc）；//添加或减去值
如果（newval>f.max）{newval=f.max；}
else如果（newval

由于我有自己的数据数组，用于所需的“计算速率”，因此可以使用“f.inc”根据所选id增加或减少滑块，一次移动一步。如果对它的工作原理没有足够的清晰，请告诉我，以便我可以编辑更多的内容以使其有意义。

有“noUiSlider.get（）”和“noUiSlider.set（）”方法可用于实现这一点。我已经做了这个日期和金额。请看下面的代码，如果您有任何问题，请告诉我

请不要忘记查看我下面脚本中的步长变量。您可以自定义步长。在日期中，您可以选择年或月。希望这对某人有所帮助。

简单数字或金额

var connectSlider=document.getElementById（'slider-connect'）；
创建（连接滑块{
起点：100，
connect:[正确，错误]，
范围：{
“min”：0，
“最大”：500
},
步骤：1，
工具提示：wNumb（{小数点：0，后缀：'K'}），
格式：wNumb（{小数点：0}）
});
connectSlider.noUiSlider.on（'update'，函数（值，句柄）{
document.getElementById（'event-start'）。innerHTML=值[0]+“K”；
//var myVal=connectSlider.noUiSlider.get（）；
});
功能手册步骤（方向）{
var currentPosition=parseInt（connectSlider.noUiSlider.get（））；
var步长=100；
如果（方向='f'）{
当前位置+=步长；
}
如果（方向='b'）{
当前位置-=步长；
}
currentPosition=（数学四舍五入（currentPosition/stepSize）*stepSize）；
连接滑块.noUiSlider.set（当前位置）；
}
document.getElementById（'stepfroward'）.onclick=function（）{manualStep（“f”）}；
document.getElementById（'stepback'）.onclick=function（）{manualStep（“b”）}


一定数量

34
减少
增加
我尝试使用此方法来应用我的代码如何与noUIslider一起工作，但尝试将其应用于按键addEventListener时变得更加复杂。经过一段时间后，使用noUIslider.set方法找到了一个解决方案。我不知道这有多容易，直到我遇到它。我回答了我的问题，但我真的很感谢你的帮助。
function incRateSlider(e){
 // changes slider rate value using plus and minus buttons
 if(e){ e.preventDefault(); }
 var f = qdata['calc-rate'];
 var id = $(this).attr("id");
 var dir = 1;
 if(id == "leftCircleRate"){ dir = -1; }    
 //console.log(f.value);    

 var newval = +f.value + +(dir * f.inc);// add or subtract values
 if(newval > f.max){ newval = f.max;}
 else if(newval < f.min){ newval = f.min; } 

 var slider = document.getElementById('paymentSliderInterest');
 slider.noUiSlider.set(newval); //this sets the value for the slider "super necessary"
 setInterestSliderDisplay(newval);  
}