noUIslider adjustment with plus and minus buttons on slider

Question

Has anyone included anchor tags as a plus and minus function to increase and decrease your value on the slider of the noUIslider? I haven't found anything related to this using the noUIslider yet, but I'm in hopes someone has done it before. I have an example of one of my sliders when they're created below.

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

Answer 1

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

Since I had my own array of data set for the required pieces of 'calc-rate' it was able to use the 'f.inc' to increase or decrease based on the selected id to move the slider one step at a time. If there isn't enough clarity on how this works just let me know so I can edit more of it to make sense.