Получить значение слайдера Jquery-UI при нажатии на трек слайдера? - PullRequest
Новая
       42

Получить значение слайдера Jquery-UI при нажатии на трек слайдера?

0 голосов
/ 15 октября 2019

Я пытался получить значение слайдера jquery-ui при нажатии на трек слайдера. Но я не смог получить значение слайдера. Я могу получить значение на слайде, но не могу получить его по клику. 

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

  var handlers = [25, 50, 75];

  $('#slider').on('click',function(e) {
    //code to get the value
  });

  /*While sliding I'm getting the value*/
   $("#slider").slider({
        min:0,
        max:100,
        steps:20,
        values: handlers,
        slide: function (evt, ui) {
         console.log(ui.values);
        }
    });

1 Ответ

0 голосов
/ 15 октября 2019

Добро пожаловать в переполнение стека. jQuery UI Slider добавляет ряд элементов, и вам придется быть менее двусмысленным. Если вы посмотрите на визуализированный DIV, то есть #slider, вы увидите, что он имеет высоту 0 в основном. Поэтому, когда пользователь щелкает ручку или полосу, событие щелчка может не всплыть до элемента #slider.

Рассмотрим следующий код: 

$(function() {
  function log(str) {
    $("#log").prepend("<p>" + str + "</p>");
  }
  var handlers = [25, 50, 75];

  /*While sliding I'm getting the value*/
  $("#slider").slider({
    min: 0,
    max: 100,
    steps: 20,
    values: handlers,
    slide: function(evt, ui) {
      log("Slide: " + ui.values.join(","));
      $(".ui-slider-handle", this).each(function(i, el) {
        $(el).html(ui.values[i]);
      });
    }
  }).on("click", ".ui-slider-handle", function(e) {
    log("Click: " + $(e.target).parent().slider("values").join(","));
  });
});
#log {
  width: 100%;
  height: 7em;
  font-size: 65%;
  overflow: auto;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="content">
  <div id="slider" class="ui-helper-clearfix"></div>
</div>
<div id="log" class="ui-widget"></div>

В журнале вы можете видеть активность Click и Slide. Вы можете рассмотреть возможность использования событий mousedown или mouseup, если хотите более точно определить, когда должен быть запущен обратный вызов.

...