title: How to fill the input type = range in chrome?
body: <p>I have to use an input type = range in my web app.
  The problem is that it seems to not fill properly.</p>
  <p>Have a look:</p>
  <p><a href="https://i.stack.imgur.com/QGa27.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QGa27.png" alt="enter image description here" /></a></p>
  <p>This is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-csp.min.css" integrity="sha512-nptw3cPhphu13Dy21CXMS1ceuSy2yxpKswAfZ7bAAE2Lvh8rHXhQFOjU+sSnw4B+mEoQmKFLKOj8lmXKVk3gow==" crossorigin="anonymous" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;input type="range" min="0" max="3" value="0" @change='${this.handleTableColumns}'&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>(The function called @change hides the table column with the index equal to e.target.value).</p>
  <p>Do you have any idea to fix this issue?
  Thanks in advance!</p>