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

【问题标题】：noUiSlider: Adjusting rounded input valuesnoUiSlider：调整四舍五入的输入值
【发布时间】：2023-03-27 04:24:02
【问题描述】：

当我在#annual-sales 输入字段中输入非四舍五入的数字时，插件会根据“上”或“下”自动将其向上或向下舍入。有没有办法让我在字段中输入一个特定的数字，例如 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'));

【问题讨论】：

标签： javascript jquery range rangeslider nouislider

【解决方案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 更新了您的代码。尝试更改输入字段；滑块将更新，输入值不会重置。移动滑块将更新输入。

【讨论】：