noUIslider 슬라이더의 더하기 및 빼기 버튼을 사용하여 조정

Question

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

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

을 그것은 할 수 있었다 슬라이더를 한 번에 한 단계 씩 이동하려면 'f.inc'를 사용하여 선택한 ID를 기준으로 늘리거나 줄입니다. 어떻게 작동하는지에 대한 명확성이 충분하지 않은 경우 알려 주시면 더 많은 내용을 편집하여 이해할 수 있습니다.

Answer 2

당신은 문서에서 keypress example를 사용할 수 있지만 버튼 클릭에 keypress에서 이벤트를 변경합니다.

그것은 다음과 이전 단계 얻기 위해 step 옵션을

를 사용 : 나는 'CALC 속도'의 필요한 부분에 대한 데이터 세트 내 자신의 배열을 가지고 있기 때문에

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