使滑块气泡跟上左手柄

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>