添加 Increment/Decrement 与点击功能 In 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);
});

工作fiddle：https://jsfiddle.net/kjuh62yg/

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

Answer 1

您可以简单地使用 bootstrap 滑块的 getValue 和 setValue 到 increment 并通过 button 单击减少 slider 的值或 + 或 - 登录我为您创建的 demo。

在 increment 中，您将获得 current-value 并通过设置值和将滑块的值添加到 0.01 float 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

Hacky 需要重构，但它有效

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>

添加 Increment/Decrement 与点击功能 In Bootstrap 4 范围滑块

Add Increment/Decrement with Click function In Bootstrap 4 range slider

jquery

twitter-bootstrap

bootstrap-slider