title: Why is my slider tooltip not displaying text at start?
body: <p>I have three sliders:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row" id="time" &gt;
      &lt;div class="col-xs-4"&gt;
        Days: &lt;b&gt;1&lt;/b&gt; &lt;input id="days" type="text" class="span2" value="" data-slider-min="1" data-slider-max="31" data-slider-step="1" data-slider-value="[0,31]"/&gt; &lt;b&gt;31&lt;/b&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-4"&gt;
        Months: &lt;b&gt;January&lt;/b&gt; &lt;input id="months" type="text" data-provide="slider" data-slider-step="1" data-slider-min="0" data-slider-max="11" data-slider-tooltip="show" data-slider-value="[0,12]" /&gt; &lt;b&gt;December&lt;/b&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-4"&gt;
        Years: &lt;b&gt;0&lt;/b&gt; &lt;input id="years" type="text" class="span2" value="" data-slider-min="0" data-slider-max="2017" data-slider-step="1" data-slider-value="[0,2017]"/&gt; &lt;b&gt;Today&lt;/b&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I use the following <code>js</code> (<strong>note</strong> it does many things but we're only looking for the the tooltip issue of <code>days</code> and <code>years</code>).</p>
  
  <pre><code>var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  $("#days, #years").slider({
    tooltip: 'always',
  }); 
  $("#days").slider({
    formatter: function(value) {
      return 'Days: ' + value;
    }
  });
  $("#years").slider({
    formatter: function(value) {
      return 'Years: ' + value;
    }
  });
  $("#months").slider({
    tooltip: 'always',
    value: [0, 12],
    tooltip: 'always',
    formatter: function(value) {
       return months[value[0]] + " : " + months[value[1]];
    },
  });
  $("input").on("slide", function(slideEvt) {
      getData();
  });
  getData = function() {
      var data = [];
      for (var i = 0; i &lt; 2; i++) {
          data.push({
              day: $('#days').slider().val().split(',')[i], 
              month: months[$('#months').slider().val().split(',')[i]-1],
              year: $('#years').slider().val().split(',')[i], 
          }) ;
      }  
      console.log(data);
  }
  </code></pre>
  
  <p>Before the range numbers of the sliders days and years, it should display (example) <code>Days: 22:16</code> and <code>Years 1200:1985</code> but the labels <code>Days</code> and <code>Years</code> appears only after we start interacting with the sliders but not at the very start when we load it</p>
  
  <p><a href="https://jsfiddle.net/jikupin/pz3ce0o6/1335/" rel="nofollow noreferrer">JsFiddle here</a></p>