title: How to change background colors of a div by moving the range input
body: <p>I wanted to change background colors using the range input slider. I am stuck at this step, how to match the value of the slider with the objcect key therefore with the value that's in it.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;input class=&quot;input-range&quot; type=&quot;range&quot; value= &quot;0&quot; min=&quot;0&quot; max=&quot;5&quot;/&gt;
  &lt;span class=&quot;range-value&quot;&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class=&quot;color-box&quot;&gt;&lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>  .input-range {
      width: 300px;
      border-radius: 5px;
      background: #ccc;
      outline: none;
  }
  
  .color-box {
    width: 200px;
    height: 200px;
    background-color: &quot;#FFA957&quot;;
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>var colors = {
    1: &quot;#FFA957&quot;,
    2: &quot;#FFAD5E&quot;,
    3: &quot;#FFB165&quot;,
    4: &quot;#FFB46B&quot;,
    5: &quot;#FFB872&quot;,
  };
  
  var colorBox= $(&quot;.color-box&quot;),
   range = $(&quot;.input-range&quot;),
    value = $(&quot;.range-value&quot;);
  
  value.html(range.attr(&quot;value&quot;));
  
  range.on(&quot;input&quot;, function () {
    value.html(this.value);
  });
  </code></pre>