javascript - seiyria/bootstrap-slider 的刻度标签位置不正确

Question

我正在使用 seiyria bootstrap slider ，其中刻度标签是动态的。在这里您可以看到刻度正确对齐，但它们的标签没有对齐。

以下是示例标记

<div class="container">
<div class="examples">
    <div class='slider-example'>
         <h3>Example 13:</h3>

        <p>Using ticks.</p>
        <div class="well">
           <input id="ex13" type="text" data-slider-ticks="[100, 150, 180, 300, 400]"  data-slider-ticks-labels='["$100", "$150", "$180", "$300", "$400"]' />
        </div>
    </div>
</div>

Here is a jsFiddle显示问题

这是一张显示问题的图片:

Answer 1

这是 bootstrap-slider 插件在其官方状态下的一个限制(作者在下面的评论中确认)。

但是，通过对插件进行一些调整，您可以让它做您想做的事。

jsFiddle Example

具体来说，这是我为实现此效果所做的更改:

我更改了此 CSS 规则(您应该真正覆盖特定容器的原始规则，而不是像我为简单起见所做的那样更改插件 CSS):

.slider.slider-horizontal {
  width: 100%; /*changed*/
  height: 20px;
}

我在插件中添加了这个默认选项:

    Slider.prototype = {
        //....
        defaultOptions: {
            //...
            modify_label_layout:false // added this option
        },
        //....

然后，我将这两个函数添加到插件中:

         _modifyLabelOffset: function(){
            var positions = [];
            var $sliderContainer=$(this.element).prevAll('.slider');
            var $ticks = $sliderContainer.find('.slider-tick');
            var $labels = $sliderContainer.find('.slider-tick-label');
            $sliderContainer.css('margin-bottom', '12px');
            $ticks.each(function () {
                var $this = $(this);
                var tickWidth = $this.width();
                var tickLeft = $this.position().left;
                positions.push(tickLeft - (tickWidth))
            });
            $labels.each(function (i,e) {
                var $this = $(this);
                $this.css('width', 'auto');
                $this.css('position', 'absolute');
                $this.css('left', positions[i]+'px');
            });
            $this=this;
            $( window ).resize(function() {
                $this._delay(function(){
                    $this._modifyLabelOffset();
                }, 500);
            });
        },
        _delay: (function(){
            var timer = 0;
            return function(callback, ms){
                clearTimeout (timer);
                timer = setTimeout(callback, ms);
            };
        })(),

我把插件的初始化改成这样:

$("#ex13").slider({
    ticks: [100, 150, 180, 300, 400],
    ticks_labels: ['$100', '$150', '$180', '$300', '$400'],
    ticks_snap_bounds: 30,
    modify_label_layout:true  // added this option to the plugin, if true the layout of the lables will be modified
}).slider('setValue', 0); // starts out at 5 for some reason, weird, for now , just set it manually to 0

请注意，这有点 hack，毫无疑问可以以更好的方式合并到插件中。另外，我只在 chrome 中测试过这个。它可能无法在其他浏览器中正常运行，但这显示了概念证明，所以我会让你从那里开始:)

---

原答案:

我认为这是 bootstrap-slider 插件的限制。

请注意，如果您像这样使用均匀间隔的数字:

data-slider-ticks="[100, 200, 300, 400, 500]"

标签位置正确。 see this jsFiddle

该插件可以让您使用相对靠近的小数字，就像您在此处所做的那样，但即使是 their own example page这样做时显示布局问题: