在Bootstrap 4范围滑块中通过单击功能添加增量/减量

编程问答 2022-08-16

问题描述

我有一个使用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/

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

解决方法

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

在increment中，您将获得当前值并通过设置该值并添加到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",parseFloat(currValue - addValue).toFixed(2)) //decreamnet 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>

,

笨拙，需要重构，但是可以正常工作

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',#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>

bootstrap-sliderjquerytwitter-bootstrap