使滑块气泡跟上左手柄

Question

我有一组我希望按某些标准（评级，但也可以是其他任何东西）过滤的项目。为此，我有一个 jQuery UI 滑块：

$("#rating_slider").slider({
  range: true,
  step: 0.5,
  min: 1,
  max: 10,
  values: [3, 10],
  animate: "slow",
  orientation: "horizontal",
  slide: function(event, ui) {
    $("#amount").text(ui.value);
  }
});

.toolbar {
  padding: 10px 15px;
  background: #efefef;
  border: 1px solid #ddd;
  margin: 0 10px 10px 10px;
}

#slider-container {
  position: relative;
}

#rating_slider {
  width: 200px;
  background: #fff;
}

#amount {
  position: absolute;
  transform: translateX(-50%);
  bottom: -27px;
  display: none;
  line-height: 20px;
  width: 40px;
  border: 1px solid #e2e2e2;
  background-color: #fff;
  border-radius: 2px;
  color: #777;
  font-size: 11px;
  text-align: center;
  z-index: 2;
}

#rating_slider:active #amount {
  display: inline-block;
  margin-left: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />

<div class="toolbar rounded-sm clearfix">
  <div class="d-inline-block pl-4" id="slider-container">
    <p class="my-0 pr-3 d-inline-block">Filter by rating:</p>
    <div id="rating_slider" class="d-inline-block">
      <div id="amount">3</div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

我有一个显示 UI 滑块当前值 的“气泡”。气泡有position: absolute; 和bottom: -27px;，所以它垂直放置（在Oy 轴上）。

但它的left 位置应该是动态的，这样气泡就会跟上（左）手柄。

我无法做到这一点。

实现它的最简单、最“稳健”的方法是什么？

更新：

我已经捕获了句柄的style属性，应该很有用，但我无法在#amount element上设置：

$("#rating_slider").slider({
  range: true,
  step: 0.5,
  min: 1,
  max: 10,
  values: [3, 10],
  animate: "slow",
  orientation: "horizontal",
  slide: function(event, ui) {
    var bubblex = $(this).find('.ui-state-focus').attr('style');
    console.log(bubblex);
    $(this).find("#amount").css({
      "left": bubblex
    });
  }
});

如何将其设置为#amount？

Answer 1

由于您在将百分比值转换为像素时遇到问题，我宁愿将 #amount 元素移动到其他地方以获得更好的自身定位。

让我们尝试在幻灯片开始时将其移动到 .ui-state-focus 锚点内。

$("#rating_slider").slider({
  range: true,
  step: 0.5,
  min: 1,
  max: 10,
  values: [3, 10],
  animate: "slow",
  orientation: "horizontal",
  slide: function(event, ui) {
    //$("#amount").text(ui.value);
    $(this).find('.ui-state-focus').append($(this).find('#amount').text(ui.value)); //move the amount inside of an active anchor and update it's text value; 
  }
});

.toolbar {
  padding: 10px 15px;
  background: #efefef;
  border: 1px solid #ddd;
  margin: 0 10px 10px 10px;
}

#slider-container {
  position: relative;
}

#rating_slider {
  width: 200px;
  background: #fff;
}

#amount {
  position: absolute;
  transform: translateX(-50%);
  bottom: -27px;
  display: none;
  line-height: 20px;
  width: 40px;
  border: 1px solid #e2e2e2;
  background-color: #fff;
  border-radius: 2px;
  color: #777;
  font-size: 11px;
  text-align: center;
  z-index: 2;
  left: 50%; /* as it's translated to -50%; put a left value of 50% to center align; */
}

#rating_slider:active #amount {
  display: inline-block;
  /*margin-left: 20px;*/ /* remove the margin */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />

<div class="toolbar rounded-sm clearfix">
  <div class="d-inline-block pl-4" id="slider-container">
    <p class="my-0 pr-3 d-inline-block">Filter by rating:</p>
    <div id="rating_slider" class="d-inline-block">
      <div id="amount">3</div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

我希望这能解决你的问题。

Answer 2

您可以使用滑块的值来设置left 相对于元素的定位。基本思想是将值转换为滑块宽度的某个百分比。

$("#rating_slider").slider({
  range: true,
  step: 0.5,
  min: 1,
  max: 10,
  values: [3, 10],
  animate: "slow",
  orientation: "horizontal",
  slide: function(event, ui) {
    $("#amount").text(ui.value);

    //Set the 'left' position dynamically
    $("#amount").css(
      "left", `${ ui.value*10 + "%" }`
    );
});

或根据您的编辑

$("#rating_slider").slider({
  range: true,
  step: 0.5,
  min: 1,
  max: 10,
  values: [3, 10],
  animate: "slow",
  orientation: "horizontal",
  slide: function(event, ui) {
    var bubblex = $(this).find('.ui-state-focus').css('left');
    console.log(bubblex);
    $(this).find("#amount").css(
      "left", bubblex
    );
  }
});

Answer 3

这是一个仅在使用（移动）手柄时才显示指示器的版本，并进行了一些视觉改进。希望对更多开发者有所帮助。

$("#rating_slider").slider({
  range: true,
  step: 0.5,
  min: 1,
  max: 10,
  values: [3, 10],
  animate: "slow",
  orientation: "horizontal",
  slide: function(event, ui) {
    $(this).find('.ui-state-focus').append($(this).find('#amount').show().text(ui.value));
  }
});

.toolbar {
  padding: 10px 15px;
  background: #efefef;
  border: 1px solid #ddd;
  margin: 10px;
}

#slider-container {
  position: relative;
}

#rating_slider {
  width: 200px;
  background: #fff;
}

#amount {
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  display: none;
  line-height: 16px;
  width: 36px;
  border: 1px solid #e2e2e2;
  background-color: #fff;
  border-radius: 2px;
  color: #777;
  font-size: 11px;
  text-align: center;
}

#amount:after,
#amount:before {
  z-index: 3;
  position: absolute;
  border-style: solid;
  border-width: 0 4px 4px;
  content: "";
  height: 0;
  width: 0;
  right: auto;
}

#amount:before {
  top: -5px;
  left: 14px;
  border-color: transparent transparent #e2e2e2;
}

#amount:after {
  top: -4px;
  left: 14px;
  border-width: 0 4px 4px;
  border-color: transparent transparent #fff;
}

.ui-state-focus,
#amount {
  outline: none !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />

<div class="toolbar rounded-sm clearfix">
  <div class="d-inline-block pl-4" id="slider-container">
    <p class="my-0 pr-3 d-inline-block">Filter by rating:</p>
    <div id="rating_slider" class="d-inline-block">
      <div id="amount">3</div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>