Question

我正在使用seiyria bootstrap滑块，其中刻度标签是动态的。在这里你可以看到刻度线是正确对齐的，但它们的标签不是。

以下是样本标记

<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

请注意，这有点像黑客，无疑可以更好地融入插件。另外，我只用chrome测试了这个。它可能无法在其他浏览器中正常运行，但这显示了概念证明，所以我会让你从那里拿走它：）

原始答案：

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

请注意，如果您使用均匀间隔的数字，请执行以下操作：

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

标签位置正确。 see this jsFiddle

该插件可让你像在这里一样使用相对靠近的小数字，但即使their own example page在执行此操作时也会显示布局问题：

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

1 个答案:

jsFiddle Example