title: HTML5 reset slider to min position
body: <p>What I am trying to do is get the slider to reset it's value and animation position to zero but I can't find how.</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/v4gNL/1359/" rel="nofollow noreferrer">http://jsfiddle.net/v4gNL/1359/</a></p>
  </blockquote>
  
  <p><strong>HTML5:</strong></p>
  
  <pre><code>&lt;body&gt;
  
    &lt;span&gt;  
              &lt;select id="selectSymptom"&gt;
                  &lt;option value="option" &gt;Select Option&lt;/option&gt;
                  &lt;option value="option1" &gt;Option 1&lt;/option&gt;
                  &lt;option value="option2"&gt;Option 2&lt;/option&gt;
                  &lt;option value="option3"&gt;Option 3&lt;/option&gt;
                  &lt;option value="option4"&gt;Option 4&lt;/option&gt;
                  &lt;option value="option5"&gt;Option 5&lt;/option&gt;
                  &lt;option value="option6"&gt;Option 6&lt;/option&gt;
  
              &lt;/select&gt;
          &lt;/span&gt;
    &lt;span style='display:none;' id="slider"&gt; &lt;input type="range" min="0" max="10" value="0" step="0.1" id="rangeValue"&gt;&lt;label id="text"&gt;0&lt;/label&gt;&lt;/span&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JQuery:</strong></p>
  
  <pre><code>$('#selectSymptom').on('change', function() {
    $("#text").text(0);
  
    var selected = $(this).find('option:selected').val();
    $("#slider").show();
  });
  $("#rangeValue").mousemove(function() {
    $("#text").text($("#rangeValue").val());
  });
  </code></pre>