使滑块气泡与左手柄保持一致

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上设置：< / p>

$("#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

您可以使用滑块的值设置相对于元素的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 2

由于无法将百分比值转换为像素，我宁愿将#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 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>