Align JQuery UI 滑块值点对齐

Question

我正在使用带有 6 个点的 jQuery UI 滑块，我在滑块上方还有一个 6 divs，我想在滑块中定位点上面每个 div 的中间。

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

这是我正在做的事情的例子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

对于你，我只是算了一下。

锚点（蓝色）宽度为15px + (1px + 1px)(Border) = 17px;

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

您的情况是：max=6、min=1、step=1
因此：百分比增量为 100*step/(max-min)，即 20%。

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

现在要使滑块锚点居中，我们需要滑块从 left:8.5px 开始，并且 position:relative 到包装器 anchor's width = 17px, assesment's width = 34px。（我无法解释得比这更好）

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

现在最后一步位于 left:100% 位置，锚点位于滑块外部。这就是为什么我们需要 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-滑块宽度 = 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：我敢肯定，有比这更好的解决方案。我刚发现这个问题，我想我是否可以不在 Google 上搜索就可以做到这一点。

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

Answer 2

您将需要扩展一些 jquery ui 代码。

基本html结构即可

<section class="wrapper">  
  <div class="slider2"></div>
  <br><br>
</section>

请尝试以下笔： http://codepen.io/solankidhaval/pen/BjMjVd

Align JQuery UI 滑块值点对齐

Align JQuery UI slider values points aligment

html

css

jquery

jquery-ui

slider