jQuery to change value of bootstrap-slider
<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>