jquery - 对齐 JQuery UI slider 值点对齐

Question

我正在使用带有 6 个点的 jQuery UI slider ，我在 slider 上方也有 6 个 div，我想将 slider 中的点定位在上方每个 div 的中间。

那么有没有办法在 jquery UI slider 中指定值的位置？

这是我正在做的事情的例子jsfiddle

$('#slider').slider({
    value:1,
    min: 1,
    max: 6,
    step: 1,
    slide: function(event, ui) {

    }
});


<div id="assesment-filter">
    <div class="assesments-wrapper">
        <div id="1" class="assesment">1</div>
        <div id="2" class="assesment">2</div>
        <div id="3" class="assesment">3</div>
        <div id="4" class="assesment">4</div>
        <div id="5" class="assesment">5</div>
        <div id="6" class="assesment">6</div>
    </div>
<div id="slider"></div>
</div>


.assesments-wrapper {
    height: 33px;
}

.assesment {
    width: 33px;
    height: 33px;
    background-color: rgb(219,219,219);
    line-height: 33px;
    float: left;
    text-align: center;
    vertical-align: middle;
    color: white;
    font-size: 18px;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
}

.assesment:hover {
        cursor: pointer;
    }

.ui-slider-handle{
  display: block;
  position: relative;
  top: -6px;
  width: 15px;
  height: 15px;
  background-color: #2CBFD9;
  border-radius: 50%;
  border: 1px solid white;
}

.ui-slider-handle:hover {
  cursor: pointer;
}

.ui-slider{
  background-color: rgb(219,219,219);
  height: 3px;
  width: 203px;
  margin-bottom: 16px;
}

Answer 1

对于您来说，我只是算了一下。

anchor (蓝色)的宽度是15px + (1px + 1px)(Border) = 17px;

如果您检查 ui-slider， anchor 从 left:0% 开始，然后根据最大值、最小值和步长值递增。

在你的例子中是:max=6, min=1, step=1
因此:百分比增量为 100*step/(max-min)，即 20%。

并且每个 Assesment 都是 33px+1px=34px 因此导致包装器 div 为 34*6=204px 大约。

现在要使 slider anchor 居中，我们需要 slider 从 left:8.5px 开始，并且 position:relative 到包装器作为 anchor's width = 17px , assesment 的宽度 = 34px。(我无法解释得比这更好)

现在在第一步中， anchor 被放置在第一个 div 的中心....完成了一半的工作...D

现在，由于最后一步位于 left:100% 位置，因此 anchor 位于 slider 外部。这就是为什么我们需要 ui-slider 的宽度为

ui-slider width = width of wrapper - 2*(width of anchor).

如果 left=80% 是最后一步，那就是

ui-slider width = width of wrapper - 1*(width of anchor).

因此 ui-slider width = 204-2*17 = 170px;

现在，当第一步和最后一步对齐时，里面的其他所有东西也都落在了这个地方。(万岁)。

包括具有解决方案的 fiddle :Fiddle For Slider .

引用基本代码:

.assesments-wrapper {
        height: 33px;
        width: fit-content;
    }

.ui-slider{
  position: relative;
  background-color: rgb(219,219,219);
  height: 3px;
  width: 171px;
  left:8.5px;
  margin-bottom: 16px;
}

PS:我敢肯定，还有比这更好的解决方案。我刚发现这个问题，想着我是否可以不用谷歌搜索就可以做到这一点。

发现了一个有点奇怪的解决方案。我仍然会在 SO 上分享这个 :)。