Seiyria Bootstrap slider bar labels are not showing correctly in bootstrap modal

Question

I am using Seiyria Bootstrap slider bar as shown below. The problem is that when I click on the button to open the Bootstrap modal the slider labels are stacked on top of each other on the left as shown in the print screen. However, if I left or right click anywhere on the modal it shows it properly. In addition, I tried to use the example code outside the modal and it worked fine. I have got this example (Example 19) from this website. Bootstrap Version 3.3.7.

<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>

The slider version:

<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>

This is how the slider is shown when I click on the button to open the modal.

Expected Result - Also, When I click it is shown like this.

I have tried to inspect and fix the labels without any success. I would appropriate it if someone could tell me what I could possibly be doing wrong.

Answer 1

You are missing data-slider-ticks-positions. Add that and it works properly.

<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" />