title: How to change HTML range slider value with button?
body: <p>I am using a HTML range slider to zoom in and zoom out an image. I also want to show two buttons with slider like + for zoom and &minus; for zoom out. When a user clicks on either of these buttons, the slider should also be moved. But I am unable to do this. Here is my code.</p>
  
  <pre><code>&lt;div id="slider"&gt;
      &lt;input id="slide" type="range" min="330" max="1200" step="30" value="330" onchange="ImageViewer.sliderAction(this.value)" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my function:</p>
  
  <pre><code>var sliderAction = function (value) {
      $sliderChosen.html(value);
      $("#img").width(value);
      $("#img").height(value);
  };
  </code></pre>
  
  <p>When I click the button, I tried this:</p>
  
  <pre><code>btnZoomIn.click(function() {
      $("#slide").value();  //Want to change value but value is undefined.
  });
  </code></pre>
  
  <p>Is there any way to change slider value and move it as well on button click?</p>