Seiyria Bootstrap滑块条标签在bootstrap模式中无法正确显示

Question

我正在使用Seiyria Bootstrap滑块，如下所示。问题是，当我单击按钮打开Bootstrap模式时，滑块标签会在左侧堆叠在一起，如打印屏幕所示。但是，如果我左键或右键单击模态上的任何位置，它会正确显示它。另外，我试图在模态之外使用示例代码并且它工作正常。我从这个website. Bootstrap Version 3.3.7获得了这个例子（例19）。

<div class="modal fade" id="exampleModalLong">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="form-group">
          <span id="ex18-label-1" class="hidden">Example slider label</span>
          <input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["short", "medium", "long"]' data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" />
        </div>
      </div>
    </div>
  </div>
</div>

<button onClick="$('#exampleModalLong').modal();">click</button>

滑块版本：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.min.js"></script>

当我点击按钮打开模态时，这就是滑块的显示方式。

预期结果 - 此外，当我点击它时会显示如下。

我试图检查并修复标签但没有成功。如果有人能告诉我我可能做错了什么，我会说的。

Answer 1

您缺少数据 - 滑块 - 刻度 - 位置。添加它，它可以正常工作。

<input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["short", "medium", "long"]' data-slider-ticks-positions="[0,50,100]" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" />