Как получить значение слайдера диапазона jQuery ui?

Question

Я делаю ползунок диапазона с помощью jQuery ui и пытаюсь получить значение во время использования ползунка.

Я нашел несколько похожих примеров, но все, что я получил, это [object Object], а не ожидаемое 1, 2 или 3.

  $("#range-slider").slider({
    min:1,
    value:2,
    max: 3,
    slide: function( event, ui) {
      $("#text").text($("#range-slider").val(ui.value))
    }
  })

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="range-slider"></div>

<p id="text"> </p>

Что я должен изменить, чтобы получить правильный результат? Спасибо!

Answer 1

Потому что вы передаете $("#range-slider") в $("#text"), который является не значением ползунка, а объектом jQuery.

Так что просто передайте ui.value и все будет работать так, как вы ожидали.

$("#range-slider").slider({
    min:1,
    value:2,
    max: 3,
    slide: function( event, ui) {
      $("#text").text(ui.value)
    }
  })

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="range-slider"></div>

<p id="text"> </p>