[SOLVED] I am trying to style the thumb of a range input but the webkit doesn't work

I am trying to style the thumb of a range input but the webkit doesn't work

Well I am trying to style a range thumb in chrome but the my code just doesn't work in any way and I don't know why:

html 
<input type="range" min="0" max="38" value="20" class="slider" id="slider">

sass:
&::-webkit-slider-thumb
      background-color: #000000
      clip-path: polygon(0 46%, 100% 45%, 100% 60%, 0 61%)
      height: 100%
      width: 50%
      padding: 0
      opacity: 0.8
      &:hover
        opacity: 1

This is the jfidle whit all the code https://jsfiddle.net/81x7v4tn/ open in in chrome to see the problem

Solution

The issue was that you haven't eliminated the default appearance of the slider thumb. So no custom style would be implemented if the default appearance is set.

Change done to SASS:

&::-webkit-slider-thumb
      -webkit-appearance: none
      appearance: none
      background-color: #000000
      //clip-path: polygon(0 46%, 100% 45%, 100% 60%, 0 61%)
      height: 100%
      width: 50%
      padding: 0
      cursor: pointer
      opacity: 1

Working JSFiddle: https://jsfiddle.net/5pe42ron/

I hope that works for you.