jqueryinputsliderrangebootstrap-slider

Adjust range depending on input value using bootstrap-slider by seiyria

My goal is that the user can adjust the Belopp in 2 ways, thru the input field or thru the slider. The latter is now working, so one problem is not yet solved.

I want my slider to adjust depending on the value inputted on the input field

In the screenshot, value of Belopp is 40. But the range slider is still in the middle. It is incorrect for it should be on the far left side since inputted value is 40.

enter image description here

My HTML:

       <div class="col-12  mx-auto ">
            <div class="slider-wrapper slider-ghost">
                <input class="input-range" 
                id='priceSlider' 
                type="text" 
                data-slider-min="40" 
                data-slider-tooltip="hide" 
                data-slider-max="120" 
                data-slider-step="1" 
                data-slider-value=""
                />
            </div>
        </div>

and my JS where I have already assigned the value of the slider to newBeloppValue but the range slider wont move.

$(document).ready(function () {
$("#belopp").change(function () {
  let newBeloppValue = parseFloat($("#belopp").val());
  if ($("#belopp").val().length > 0) {
    // belopp value should not be lower or higher than the minmax range
    if (newBeloppValue < minValue || newBeloppValue > maxValue) {
      console.log("error");
    } else {
        //value of slider should get the input value 
      $("#priceSlider").slider({
        value: newBeloppValue,
      });
    }
  }
});

$("#priceSlider").slider();
$("#priceSlider").on("slide", function (slideEvt) {
  // slider value will be displayed on the belopp input
  $("#belopp").val(slideEvt.value);
});

}); })

What am I missing here?

Solution

  • You need to get min & max value from your slider to compare if the value enter by is in range or not and to set this value inside your slider you can use $("#priceSlider").slider('setValue', newBeloppValue);

    Demo Code :

    $(document).ready(function() {

  $("#belopp").keyup(function() {
    //get min & max values from slider
    let minValue = $("#priceSlider").data('slider-min')
    let maxValue = $("#priceSlider").data('slider-max')
    console.log(minValue + " " + maxValue)
    let newBeloppValue = parseInt($("#belopp").val());
    if ($("#belopp").val().length > 0) {
      if (newBeloppValue < minValue || newBeloppValue > maxValue) {
        console.log("error");
      } else {
        //set same inside slider
        $("#priceSlider").slider('setValue', newBeloppValue);
      }

    }

  });

  $("#priceSlider").slider();
  $("#priceSlider").on("slide", function(slideEvt) {
    // slider value will be displayed on the belopp input
    $("#belopp").val(slideEvt.value);
  });

});
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.css" integrity="sha512-SZgE3m1he0aEF3tIxxnz/3mXu/u/wlMNxQSnE0Cni9j/O8Gs+TjM9tm1NX34nRQ7GiLwUEzwuE3Wv2FLz2667w==" crossorigin="anonymous" />

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

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

<div class="col-12  mx-auto ">

  <div class="slider-wrapper slider-ghost">

    <input class="input-range" id='priceSlider' type="text" data-slider-min="40" data-slider-tooltip="hide" data-slider-max="120" data-slider-step="1" data-slider-value="40" />

  </div>

</div>



<input type="text" id="belopp">