JQuery UI 范围滑块值

Question

我正在使用 JQuery UI 范围滑块。我有自定义 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>

有什么想法吗？

Answer 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>

JQuery UI 范围滑块值

JQuery UI Range Slider values

css

jquery

jquery-ui