fancyrange

by Jasper Krielaars

HTML

<h1>Fancy range input</h1>
This example only has the css for webkit browsers. Update the css for this to be compatible with non-webkit bworsers.

<input type="range" style="s20" value="20" oninput="this.setAttribute('style', 's'+this.value)"></input>

SCSS

input[type=range]{
  -webkit-appearance: none;
  width: 100%;
  margin: 13.8px 0;
  
   &:focus {
    outline: none;
  }
  
  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    border-radius: 5px;
  }
  
  &::-webkit-slider-thumb {
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: white;
    border: 1px solid black;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -14px;
  }
  
  @for $i from 0 through 100 {
    &[style=s#{$i}]::-webkit-slider-runnable-track {
      background: linear-gradient(to right, blue round(percentage($i/100)),  purple round(percentage($i/100)));
    }
  }
  
}