当我在#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'));
这可以通过实现自己的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
处理程序中设置的值更新输入。
我已经用一个有效的示例更新了您的代码。尝试更改输入字段;滑块将更新,输入值将不会重置。移动滑块将更新输入。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句