在Bootstrap 4范围滑块中添加带点击功能的增量/减量

Question

我用BS和bootstrap-slider.js构建了这个范围滑块，通过拖动可以很好地工作：

<div class="container range">
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8">
<div id="ex6CurrentSliderValLabel">
<span id="ex6SliderVal">2.5</span>
</div>
<input id="ex6" type="text" data-slider-min="0" data-slider-max="4" data-slider-step="0.01" data-slider-value="2.5"/>
</div>
<div class="col-sm-2">
</div>
</div>
</div>

JS:

$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});

工作小提琴：https://jsfiddle.net/kjuh62yg/

我还想添加加号和减号箭头(按钮(，通过鼠标单击来增加和减少值。

Answer 1

您可以简单地使用引导滑块的getValue和setValue到increment，并在为您创建的demo中单击button或+或-来递减slider的值。

在increment中，您将获得当前值，并通过设置值并将滑块的值添加到0.01浮动number来增加值。为了确保我们添加的是correct浮点value，我们可以使用toFixed((函数来确保我们添加浮点decimal不是直的精确数字。

在decrement中，我们使用相同的，但在这种情况下，我们减去slider的值，并向后移动以获得视觉效果，同时更新跨度文本

现场演示：

let mySlider = $("#ex6").slider(); //initiate slider
let spanText = $("#ex6SliderVal") //span text
let addValue = 0.01; //add float to increment 
$("#ex6").on("slide", function(slideEvt) {
spanText.text(slideEvt.value)
});

//Increment
$(".add").on("click", function() {
let currValue = mySlider.slider('getValue'); //get current value
mySlider.slider('setValue', parseFloat(currValue + addValue).toFixed(2)) //increment value of slider
spanText.text(currValue) //show span
});
//Decrement 
$(".subtract").on("click", function() {
let currValue = mySlider.slider('getValue'); //get current value
mySlider.slider('setValue', parseFloat(currValue - addValue).toFixed(2)) //decrement value of slider
spanText.text(currValue) //show span
});

.range {
margin-top: 40px;
text-align: center;
}
#ex6CurrentSliderValLabel {
margin-bottom: 20px;
text-align: center;
font-size: 56px;
font-weight: 600;
}
.slider.slider-horizontal {
width: 100%;
}
.slider.slider-horizontal:before {}
.subtract {
cursor: pointer;
margin-right: 6%;
}
.add {
cursor: pointer;
margin-left: 6%;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js" integrity="sha512-f0VlzJbcEB6KiW8ZVtL+5HWPDyW1+nJEjguZ5IVnSQkvZbwBt2RfCBY0CBO1PsMAqxxrG4Di6TfsCPP3ZRwKpA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css" integrity="sha512-3q8fi8M0VS+X/3n64Ndpp6Bit7oXSiyCnzmlx6IDBLGlY5euFySyJ46RUlqIVs0DPCGOypqP8IRk/EyPvU28mQ==" crossorigin="anonymous"
/>
<div class="container range">
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8">
<div id="ex6CurrentSliderValLabel">
<span id="ex6SliderVal">0</span>
</div>
<i class="fa fa-minus subtract" aria-hidden="true"></i>
<input id="ex6" type="text" data-slider-min="0" data-slider-max="4" data-slider-step="0.01" data-slider-value="0" />
<i class="fa fa-plus add" aria-hidden="true"></i>
</div>
<div class="col-sm-2">
</div>
</div>
</div>

Answer 2

破解并需要重构，但它可以

var slider = new Slider("#ex6");
var valueConteiner = document.getElementById("ex6SliderVal");
slider.on("slide", function(sliderValue) {
valueConteiner.textContent = sliderValue;
});
function incrementDecrement(el, value) {
let currentValue = slider.getValue();
if(el[0].id === "plus") {
slider.setValue(currentValue + value)
} else if(el[0].id === "minus") {
slider.setValue(currentValue - value)
}
valueConteiner.textContent = slider._state.value[0];  
}
$('.container.range')
.off('click', '#plus, #minus')
.on('click', '#plus, #minus', function(e) {
if ($(this).attr('id').match('plus')) {
incrementDecrement($(this), 1) // second parameter determines increment step
} else {
incrementDecrement($(this), 0.1) // second parameter determines decrement step
}
})

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css">
<div class="container range">
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8">
<div id="ex6CurrentSliderValLabel">
<span id="ex6SliderVal">2.5</span>
</div>
<input id="ex6" type="text" data-slider-min="0" data-slider-max="4" data-slider-step="0.01" data-slider-value="2.5"/>
</div>
<div class="col-sm-2">
</div>
</div>
<button id="plus">+</button>
<button id="minus">-</button>
</div>