Send jQuery slider value with AJAX

Question

I send two jQuery variables (urlid and bonus) with AJAX to a server sided script. This is working as expected.

Now I want to add a jQuery slider (#slider-vertical) to the script. The actual chosen value of the slider should be send with AJAX. I have tried it like that but the value of the slider doesn´t get send. I don´t get an error message.

jQuery(function ($) {

    getResponse(0);
    $('ul#menu li').click(function () {
        var bonus = $(this).attr("value");
        getResponse(bonus);
    });

    function getResponse(bonus) {

        var urltosplit = window.location.href;
        var urlid = urltosplit.substring(urltosplit.lastIndexOf('/') + 1);

        $("#slider-vertical").slider({
            orientation: "horizontal",
            range: "min",
            min: 0,
            max: $('#amount2').val(),
            value: $('#amount2').val(),
            slide: function (event, ui) {
                $("#amount").val(ui.value);
            },
        });

        $.ajax({
            type: "GET",
            cache: "true",
            url: "itemscript.php",
            data: {
                "var": urlid,
                "bonus": bonus,
                "itemlevel": $('#slider-vertical').slider("option", "value")
            },
            success: function (data) {
                $('.item-content').html('<div class="tooltipitem-site"><div class="ui-tooltip-site">' + data + '</div></div>');
            }
        });
    }
});

This is the slider html:

  <input class="item-slider" readonly id="amount">/
  <input class="item-slider" readonly id="amount2" value="<?php echo $phpVar; ?>">
 
  <div id="slider-vertical" style="height:50px;"></div>

Answer 1

Try to change $('#slider-vertical').slider("option", "value")

by $("#slider-vertical").slider( "value" );

value()Returns: Number Get the value of the slider. This signature does not accept any arguments. Code examples: Invoke the method:

jQuery UI API Ref

Only from complement my last comment , hope this help

  <script>
     
      $(function () {

        $("#slider-vertical").slider({
          orientation: "horizontal",
          range: "min",
          min: 0,
          max: $("#amount2").val(),
          value: $("#amount2").val(),
          slide: function (event, ui) {
            $("#amount").val(ui.value);
          },
        });

        $("#send").bind("click", function () {
          console.log($("#slider-vertical").slider("value"));
          let bonus = 100;
          getResponse(bonus);
        });
      });

      function getResponse(bonus) {
        var urltosplit = "test";
        var urlid = "test";

        $.ajax({
          type: "GET",
          cache: "true",
          url: "test.php",
          data: {
            var: urlid,
            bonus: bonus,
            itemlevel: $("#slider-vertical").slider("value"),
          },
          success: function (data) {
            $(".item-content").html(
              '<div class="tooltipitem-site"><div class="ui-tooltip-site">' +
                data +
                "</div></div>"
            );
          },
        });
      }
    </script>

Result Image