Bootstrap slider - buttons

Bootstrap slider - control with plus and minus buttons

by NAGA SAI AYTHA

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/css/bootstrap-slider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.min.js"></script>
<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>

JavaScript

// 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)
});