单击滑块轨道时获取 Jquery-UI 滑块值？

Posted 2023-05-08

【中文标题】单击滑块轨道时获取 Jquery-UI 滑块值？

【英文标题】：Getting Jquery-UI slider value while clicking on slider-track?

【发布时间】：2020-02-12 04:44:57

【问题描述】：

我试图在单击滑块轨道时获取 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】：

欢迎来到 Stack Overflow。 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 事件。

【讨论】：

当用户试图点击滑块轨道时，滑块手柄不应该是可移动的，但我需要知道点击的值是在轨道上而不移动手柄

@RajendraPrasad 如果手柄不应该移动，那么 Slider 可能不是最好的小部件。如果您希望每个滑块句柄的值出现在句柄中，那将是一个不同的函数。请澄清。

是否有任何选项可以使用此滑块小部件实现该功能？