jQuery Slider sends wrong value via AJAX

user_15076882 0
Viewed 32

I´m using the jQuery Slider plugin. The current selected value of the slider should be send with AJAX to a server sided script.

At the moment I´ve a wrong behaviour. The current selected value is always one value infront or behind the value which is send with AJAX.

For example: If you slide to the value 5/ 50 it will send "6" instead of "5" to the server sided script.

I´ve made a JS Fiddle. Just look under the developers network tab.

  // Slider Script

    $("#slider-vertical").slider({
        orientation: "horizontal",
        range: "min",
        min: 1,
        max: 50,
        value: 50,
        slide: function (event, ui) {
            $("#amount").val(ui.value);
        },
    });
  
  $("#amount").val($("#slider-vertical").slider("value"));
  
  // Get Response
    $('#slider-vertical').on('slide', getResponse);
    getResponse(0);

    function getResponse() {
        let itemlevel2 = $("#slider-vertical").slider("value");

        ajaxManager.add({
            type: "GET",
            cache: "true",
            url: "itemscript.php",
            data: {
                "itemlevel": itemlevel2
            },
            success: function (data) {

            }
        });
    }
});
jquery javascript
2 Answers

To correct this behaviour you can use the stop event to only make the AJAX call when the slider stops moving. This has the added benefit of not flooding your server with requests for every single value the slider moves through. Try this:

jQuery(function($) {
  $("#slider-vertical").slider({
    orientation: "horizontal",
    range: "min",
    min: 1,
    max: 50,
    value: 50,
    slide: function(event, ui) {
      $("#amount").val(ui.value);
    },
    stop: getResponse
  });

  $("#amount").val($("#slider-vertical").slider("value"));
  getResponse(0);

  function getResponse() {
    let itemlevel2 = $("#slider-vertical").slider("value");
    console.log(itemlevel2);
    // AJAX here...
  }
});
.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
  width: 100%;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header {
  border: 1px solid #444 !important;
  background: none !important;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
  background-color: #353232;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
  background-color: #817373!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<p>
  <label class="item-slider" for="amount">Stufe:</label>
  <input class="item-slider" readonly id="amount">/
  <input class="item-slider" readonly id="amount2" value="50">
</p>
<div id="slider-vertical" style="height: 10px;"></div>

user_5194130

The slide event occurs before the slider has updated, which gives you the chance to cancel the slide without having to jump through hoops to restore the value.

So your

slide: function(e, ui) { ui.value }

gives the expected value, but your

$('#slider-vertical').on('slide', () => {
    $("#slider-vertical").slider("value")
});

gives the current value - ie before it has completed the slide

https://api.jqueryui.com/slider/#event-slide

Triggered on every mouse move during slide. The value provided in the event as ui.value represents the value that the handle will have as a result of the current movement. Cancelling the event will prevent the handle from moving and the handle will continue to have its previous value.

the solution, if you want to continue to use slide [see other answer for recommended alternative event], is to use ui.value in your own event handler (or add getResponse to the slide: setup)

$('#slider-vertical').on('slide', getResponse);
function getResponse(e, ui) {
    //let itemlevel2 = $("#slider-vertical").slider("value");
    let itemlevel2 = ui.value;
};

Updated fiddle

user_21815140
Related