Bootstrap slider - control with +/- buttons

Question

I'm using bootstrap slider and looking for a way to control it by clicking on a '+' plus or '-' minus button - which should move the slider by the pre-set 'Step' value.

Please see this fiddle

I am able to use the slider as normal and able to control it by entering text in the input field - but cannot get the buttons to work .. hopefully missing something simple!

Thanks for any assistance...

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

To achieve expected result, use below option for increasing and decreasing slider value

1. Use 'getValue' to get slider value var val = mySlider.slider('getValue');

2. Use 'getAttribute' value to get step var step = mySlider.slider('getAttribute').step;

3. On every click add step or subtract step based on '+' / '-' button

$(".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)
});

Working code for reference - 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>