我正在使用noUi Slider制作一个滑块。试图实现“优雅”的解决方案。由于我的ui手柄很大,我将ui基础稍微放大了一点,并在基础上增加了额外的值。但是这些值是不允许的,手柄会跳回到允许的值。我决定把加号和减号按钮放在受限制的值的位置。
但问题是,我无法实现这样的效果:当您将手柄移动到控制符号(加号/减号)时,它们会隐藏在手柄后面。在我的情况下,它们仍然在顶部。我很难解决这个问题。
需要一些帮助/建议。
这是我的代码(样式在JSFiddle上):
$(document).ready(function(){
var sliders = document.getElementById('red'),
input = document.getElementById('handle'),
sliderPlus = document.getElementById('slider-amount-plus'),
sliderMinus = document.getElementById('slider-amount-minus'),
termCur = 500;
noUiSlider.create(sliders, {
start: termCur,
step: 50,
connect: "lower",
range: {
'min': 0,
'max': 1100
},
pips: {
mode: 'values',
values: [100, 500, 1000],
density: 4.5
}
});
$('<div class="value">' + termCur + ' zł' + '</div>').appendTo($('.noUi-handle', sliders));
sliders.noUiSlider.on('change', function ( values, handle ) {
if ( values[handle] < 100 ) {
sliders.noUiSlider.set(100);
} else if ( values[handle] > 1000 ) {
sliders.noUiSlider.set(1000);
}
});
sliders.noUiSlider.on('update', function( values ) {
termCur = values;
if( termCur >= 100 && termCur <= 1000 ) {
$('.value', sliders).text(parseInt(termCur) + ' zł');}
});
sliderPlus.addEventListener('click', function(){
if(termCur < 1000) {
var setValue = parseInt(termCur) + 50;
sliders.noUiSlider.set(setValue);
}
});
sliderMinus.addEventListener('click', function(){
if(termCur > 100) {
var setValue = parseInt(termCur) - 50;
sliders.noUiSlider.set(setValue);
}
});
<div class="sliders" id="red">
<a class="controls-symbols slider-minus" id="slider-amount-minus"><i class="fa fa-minus"></i></a>
<a class="controls-symbols slider-plus" id="slider-amount-plus"><i class="fa fa-plus"></i></a>
</div>
on
方法附加单击事件,如下所示:$(document).on('click', sliderMinus, function(e){ alert('click'); });
这将确保事件始终附加。在引用sliderMinus
之前,它被克隆然后删除,因此事件没有得到适当处理。 - zgoodval>=100 && val<=1000
代替val>100 && val<1000
,则on(click)就会出现问题。我不得不将$('.value',sliders).text(termCur + 'zł');
放入单击事件中,现在它可以正常工作了。演示代码 - Ilya K