title: Using a slider for opacity of a div
body: <p>I'm having a bit of trouble having a slider change the opacity value of my div.  Here is a fiddle of what I've been working with: <a href="https://jsfiddle.net/yfmLk1ad/1/" rel="noreferrer">https://jsfiddle.net/yfmLk1ad/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#bgopacity').on('slide', function(value) {
     $('.background-color').css({
         opacity: value * '.01'
     });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.background-color {
      width: 500px;
      height: 500px;
      background: red;
      opacity: .5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="background-color"&gt;&lt;/div&gt;
  &lt;form&gt;
      &lt;label&gt;Color Opacity&lt;/label&gt;
      &lt;input type="range" name="bgopacity" id="bgopacity" value="50" min="0" max="100" step="1" onchange="rangevalue.value=value"&gt;
      &lt;output id="rangevalue"&gt;50&lt;/output&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>