How to fill the input type = range in chrome?

Question

I have to use an input type = range in my web app. The problem is that it seems to not fill properly.

Have a look:

This is my code:

<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" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous"></script>
<input type="range" min="0" max="3" value="0" @change='${this.handleTableColumns}'>

(The function called @change hides the table column with the index equal to e.target.value).

Do you have any idea to fix this issue? Thanks in advance!

Answer 1

Ok guys, I found the bug: there was a css that styled inputs in an inusual way. I changed it styling in this way only the specific input tags and not the range input tag.

This was the css rule that broke the range input. This explains also why the code snipped posted here is working. Thanks to all! Have a good day

.styled-input {
          padding: 4px 20px;
          margin: 0 4px;          
          font-size: 14px;
          border-radius: 2px;
          border: 1px solid;
          outline: none;
        }