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

Question

I have this range slider built with BS and bootstrap-slider.js that is working nicely by dragging:

<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>

the JS:

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

Working fiddle: https://jsfiddle.net/kjuh62yg/

I would like to also add plus and minus arrows (buttons) to increment and decrement the value with mouse click.

Answer 1

You can simply use getValue and setValue of bootstrap slider to increment and decrement value of your slider with button click or + OR - sign in the demo i created for you.

In the increment you will get the current-value and increase the value by setting the value and adding the value of your slider which is to 0.01 float number. To make sure that we are adding the correct float value we can use toFixed() function which ensures that we are adding float decimal not straight exact numbers.

In the decrement we use the same but in this case we subtract the value of the slider and move the backwards for visual effect as well as we update the span text

Live Demo:

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 and needs refactoring, but it works

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>