Chrisstar Chrisstar - 3 months ago 17
CSS Question

Javascript custom range input snippet

I wanted to know if anyone here has a little snippet for me that makes an custom range input slider (I am aware that there already is one in html5). I want to make the styling easier as well as cross-browser compatibility.

Thanks in advance.

Answer

try this Css script:

input[type=range] {
  -webkit-appearance: none; 
  width: 100%; 
  background: transparent; 

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; }

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent; 
  border-color: transparent;
  color: transparent;
}