noUiSlider：调整四舍五入的输入值

Question

当我在＃年度销售输入字段中输入一个非舍入数字时，该插件根据“上”或“下”自动将其舍入或舍入。 有没有办法让我在1234567这个字段中输入一个特定的数字并让它保留这个值？然后滑动到上一个或下一个值将会使其回到原位。

<input type="text" id="annual-sales"> 
<div class="slider-wrap"> 
    <div class="range-slider-sales-vol"></div> 
</div> 

// The first number in the array represents the range. Between the 4 options below I have a range from 1000 - 1000000. 
// The second number represents the stepped increments within the given range. From the first to second range the stepped increments are 1000. 

var range_all_sliders = { 
    'min': [ 1000, 1000 ], 
    '33%': [ 100000, 50000 ], 
    '66%': [ 500000, 100000 ], 
    'max': [ 1000000 ] 
}; 

$('.range-slider-sales-vol').noUiSlider({ 
    start: [ 1000 ], 
    range: range_all_sliders, 
    format: wNumb({ 
     decimals: 0 
    }) 
}); 

// Pips plugin for points along range slider 
$('.range-slider-sales-vol').noUiSlider_pips({ 
    mode: 'positions', 
    values: [0,33,66,100], 
    density: 4, 
    stepped: true 
}); 

// links range slider to input 
$('.range-slider-sales-vol').Link("lower").to($('#annual-sales')); 

Answer 1

这可以通过实现自己的change处理程序，重写一个noUiSlider设置在默认情况下进行。

var annualSales = $('#annual-sales'), guard = false; 

function setSalesValue(value){ 
    if (guard) return; 
    $(this).val(value); 
} 

annualSales.change(function(){ 
    var value = $(this).val(); 

    guard = true; 
    slider.val(value); 
    guard = false; 
}); 

// links range slider to input 
$('.range-slider-sales-vol').Link("lower").to(annualSales, setSalesValue); 

通知使用guard可变的：它防止滑块从更新与在change处理程序中设置的值的输入端。

我用working example更新了您的代码。尝试改变输入字段;滑块将会更新，输入值将不会被重置。移动滑块将更新输入。