JQuery UI 范围滑块值

Posted 2023-05-08

【中文标题】JQuery UI 范围滑块值

【英文标题】：JQuery UI Range Slider values

【发布时间】：2021-10-06 05:07:02

【问题描述】：

我正在使用 JQuery UI Range 滑块。我有自定义 css，我为我的范围从 89 到 98 编写了一些 JS，并在我的滑块的句柄上显示新值。如果我将左手柄移动到 91，我想在左手柄上设置“91”文本。右手柄也是如此。

问题是文本值最初不在正确的位置，当我移动一个手柄时，另一个手柄的值消失了。

这里是代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
  crossorigin="anonymous"></script>

<style>
.ui-slider 

    height: 5px;
    width: 205px;
    position: relative;
    border: none;
    background: #F5A000;
    margin-left: 20px;
    margin: 100px;



.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default 
    background: #3A3A3A;
    /* border-radius: 25px;*/
    outline: none;
    border: 1px solid #3A3A3A;
    position: absolute;
    margin-left: -5px;
    top: -7px;
    width: 4px;
    height: 15px;
    border-radius: 0;


.ui-slider-horizontal .ui-slider-range 
    background: #F5A000;


#labelHolder 
    height: 7px;
    position: relative;
    border: none;


#min,
#max 
    position: absolute;
    margin-left: -.6em;
    text-align: center;
    font-family: Lato, sans serif;
    font-size: 15px;
    font-weight: 600;
    color: #3A3A3A;


</style>


<div id="labelHolder">
    <div id="min"></div>
    <div id="max"></div>
</div>
<div id="slider"></div>

<script>
$("#slider").slider(
    range: true,
    min: 89,
    max: 98,
    step: 1,
    values: [89, 98],
    slide: function(event, ui) 
     if ((ui.values[1] - ui.values[0]) < 1) 
              return false;
          
        var delay = function() 
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');
            var label = handleIndex == 0 ? '#min' : '#max';
            $(label).html(ui.value).position(
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, 10"
            );
        ;
        
        // wait for the ui.handle to set its position
        setTimeout(delay, 5);
    
);

$('#min').html($('#slider').slider('values', 0)).position(
    my: 'center top',
    at: 'center bottom',
    of: $('#slider a:eq(0)'),
    offset: "0, 10"
);

$('#max').html($('#slider').slider('values', 1)).position(
    my: 'center top',
    at: 'center bottom',
    of: $('#slider a:eq(1)'),
    offset: "0, 10"
);
</script>

有什么想法吗？

【参考方案1】：

您可以使用each 循环来遍历您在slider 内的span 标签。然后，使用index 的值将是0,1 获取您的处理程序 的值，即: ui.values[index] 然后使用$(this) 获取迭代的当前跨度并将其传递给您的位置。

演示代码：

$(document).ready(function() 
  $("#slider").slider(
    range: true,
    min: 89,
    max: 98,
    step: 1,
    values: [89, 98],
    slide: function(event, ui) 
      if ((ui.values[1] - ui.values[0]) < 1) 
        return false;
      
      var delay = function() 
        //loop through the span...
        $("#slider").find(".ui-slider-handle").each(function(index) 
          var label = index == 0 ? '#min' : '#max'; //change selector
          //assign value
          $(label).html(ui.values[index]).position(
            my: 'center top',
            at: 'center bottom',
            of: $(this), // current span which is iterated..
            offset: "0, 10"
          );
        );

      ;

      // wait for the ui.handle to set its position
      setTimeout(delay, 5);
    
  );


  $('#min').html($('#slider').slider('values', 0)).position(
    my: 'center top',
    at: 'center bottom',
    of: $('#slider .ui-slider-handle:eq(0)'),
    offset: "0, 10"
  );

  $('#max').html($('#slider').slider('values', 1)).position(
    my: 'center top',
    at: 'center bottom',
    of: $('#slider .ui-slider-handle:eq(1)'),
    offset: "0, 10"
  );
)

.ui-slider 
  height: 5px;
  width: 205px;
  position: relative;
  border: none;
  background: #F5A000;
  margin-left: 20px;
  margin: 100px;


.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default 
  background: #3A3A3A;
  /* border-radius: 25px;*/
  outline: none;
  border: 1px solid #3A3A3A;
  position: absolute;
  margin-left: -5px;
  top: -7px;
  width: 4px;
  height: 15px;
  border-radius: 0;


.ui-slider-horizontal .ui-slider-range 
  background: #F5A000;


#labelHolder 
  height: 7px;
  position: relative;
  border: none;


#min,
#max 
  position: absolute;
  margin-left: -.6em;
  text-align: center;
  font-family: Lato, sans serif;
  font-size: 15px;
  font-weight: 600;
  color: #3A3A3A;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>



<div id="labelHolder">
  <div id="min"></div>
  <div id="max"></div>
</div>
<div id="slider"></div>

【讨论】：

感谢您的宝贵建议。但有一个问题。在开始移动手柄之前，我们看不到初始值。如何解决这个问题？谢谢