title: jQuery to change value of bootstrap-slider
body: <p>I have the following HTML slider script for making a <strong>Bootstrap</strong> slider:</p>
  
  <pre><code>&lt;div class="slider-div"&gt;
       &lt;input id="ex19" type="text"
            data-provide="slider"
            data-slider-ticks="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
            data-slider-ticks-labels='["0mm", "1mm", "2mm", "3mm", "4mm", "5mm", "6mm", "7mm", "8mm", "9mm"]'
            data-slider-min="1"
            data-slider-max="9"
            data-slider-step="1"
            data-slider-value="0"
            data-slider-tooltip="hide"
       /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>A template can be seen on <em>Example 19</em> of this <a href="http://seiyria.com/bootstrap-slider/" rel="nofollow">Bootstrap-slider page</a>.</p>
  
  <p>How can I manually change the slider via <strong>jQuery</strong>? </p>
  
  <p>I noticed that when a new point is chosen on the slider, there is a lot of <strong>HTML</strong> and <strong>CSS</strong> content that changes, too. This means that I can't simply do something like </p>
  
  <pre><code>$('.slider-handle').attr('aria-valuenow', 7);
  </code></pre>
  
  <p>because all that does is change the literal value but nothing visually.</p>