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

user_12102184 0
Viewed 853

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

sass css html
1 Answers

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 fiddle:- https://jsfiddle.net/5pe42ron/

I hope that works for you.

Thanks

user_14257850
Related