Question

我使用带有6个点的jQuery UI滑块，我在滑块上面还有6个div，我想在滑块中的每个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的包装器。（我无法解释比这更好）

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

现在最后一步是在left:100%位置，锚点被放置在滑块之外。这就是为什么我们需要ui-slider的宽度为

ui-slider width = 包装器宽度 - 2 *（锚点宽度）。

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

ui-slider width = 包装器宽度 - 1 *（宽度锚）。

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

现在，当第一步也是最后一步对齐时，其他所有内容也都落到了这个位置。（Hurray）。

包括有解决方案的小提琴：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

对齐JQuery UI滑块值点对齐

2 个答案: