Bootstrap 滑块 - 使用 +/- 按钮控制

Question

我正在使用 bootstrap slider 并寻找一种通过单击“+”加号或“-”减号按钮来控制它的方法 - 这应该按预设 [=24] 移动滑块=]值。

请看这个fiddle

我可以正常使用滑块并可以通过在输入字段中输入文本来控制它 - 但无法使按钮工作..希望缺少一些简单的东西！

感谢您的帮助...

G.

<label id="my-sliderlLabel">Value 0 to 2000</label><br /><br />
<input id="inputSliderVal" value="1000" placeholder="1000" class="components-input">
<br /><br />


<div class="my-slider-wrapper">
  <button class="sliderButton minus">-</button>
  <div class="slider-inner-wrapper">
    <input id="my-slider" type="text" />
  </div>
  <button class="sliderButton plus">+</button>
</div>


// Initialise slider settings
$("#my-slider").slider({
  min: 0,
  max: 2000,
  step: 50,
  value: 1000
});


// Initialise slider
$("#my-slider").on("slide", function(slideEvt) {
  $("#inputSliderVal").val(slideEvt.value);

});


// Allow input text to change slider on Blur or Enter
var minSliderValue = $("#my-slider").data("slider-min");
var maxSliderValue = $("#my-slider").data("slider-max");

// Blur input
$("#inputSliderVal").on("blur", function() {
  var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
  this.value = val > maxSliderValue ? maxSliderValue : val;
  $('#my-slider').slider('setValue', val);
});

// Enter clicked
$("#inputSliderVal").keyup(function(e) {
  if (e.which == 13) // Enter key
    $(this).blur();
});

// Use buttons to increase/decrease
// Increase
$(".sliderButton.plus").click(function() {
  var value = $("#my-slider").data('slider').getValue();
  var step = $("#my-slider").slider("option", "step");
  $("#my-slider").slider("value", value + step);
});

// Decrease
$(".sliderButton.minus").click(function() {
  var value = $("#my-slider").data('slider').getValue();
  var step = $("#my-slider").slider("option", "step");
  $("#my-slider").slider("value", value - step);
});

Answer 1

要达到预期结果，请使用以下选项增加和减少滑块值

使用“getValue”获取滑块值 var val = mySlider.slider('getValue');
使用'getAttribute'值获取步骤 var step = mySlider.slider('getAttribute').step;
每次单击时根据 '+' / '-' 按钮添加步骤或减去步骤

$(".sliderButton.plus").click(函数() { var val = mySlider.slider('getValue'); var step = mySlider.slider('getAttribute').step; $("#inputSliderVal").val(val+step); 我的滑块 .slider('setValue', val+step) });</p> <pre><code>// Decrease $(".sliderButton.minus").click(function() { var val = mySlider.slider('getValue'); var step = mySlider.slider('getAttribute').step; $("#inputSliderVal").val(val-step); mySlider .slider('setValue', val-step) });

参考工作代码 - https://jsfiddle.net/Nagasai_Aytha/1parbgxw/1/

// Initialise slider settings
var mySlider = $("#my-slider").slider({
  min: 0,
  max: 2000,
  step: 50,
  value: 1000
});


// Initialise slider
$("#my-slider").on("slide", function(slideEvt) {
  $("#inputSliderVal").val(slideEvt.value);

});


// Allow input text to change slider on Blur or Enter
var minSliderValue = $("#my-slider").data("slider-min");
var maxSliderValue = $("#my-slider").data("slider-max");

// Blur input
$("#inputSliderVal").on("blur", function() {
  var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
  this.value = val > maxSliderValue ? maxSliderValue : val;
  $('#my-slider').slider('setValue', val);
});

// Enter clicked
$("#inputSliderVal").keyup(function(e) {
  if (e.which == 13) // Enter key
    $(this).blur();
});

// Use buttons to increase/decrease
// Increase
$(".sliderButton.plus").click(function() {
var val = mySlider.slider('getValue');
var step = mySlider.slider('getAttribute').step;
$("#inputSliderVal").val(val+step);
 mySlider
  .slider('setValue', val+step)
});

// Decrease
$(".sliderButton.minus").click(function() {
var val = mySlider.slider('getValue');
var step = mySlider.slider('getAttribute').step;
$("#inputSliderVal").val(val-step);
 mySlider
  .slider('setValue', val-step)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/css/bootstrap-slider.min.css" rel="stylesheet"/>

<label id="my-sliderlLabel">Value 0 to 2000</label><br /><br />
<input id="inputSliderVal" value="1000" placeholder="1000" class="components-input">
<br /><br />

<div class="my-slider-wrapper">
  <button class="sliderButton minus">-</button>
  <div class="slider-inner-wrapper">
    <input id="my-slider" type="text" />
  </div>
  <button class="sliderButton plus">+</button>
</div>

Bootstrap 滑块 - 使用 +/- 按钮控制

Bootstrap slider - control with +/- buttons

javascript

jquery

bootstrap-slider