All comments

• 

  Thomas Allen•30

  @teasmadeSubmitted almost 4 years ago

  Q: How to get progress colour change for the range slider working in Chrome? I couldn't seem to find a pure CSS solution.

  

  Price Component using vanilla CSS & JS

  2

  20
  

  Ramon•130

  @ramonrpPosted almost 4 years ago

  Here you have a solution to have a input range with color only using css. Key here is to set overflow:hidden in your input and use a shadow-box in the thumb. In this I also change totally how silder looks, you have to adjust properties.

  input[type="range"] {
      -webkit-appearance:none;
      appearance:none;
      margin:5px;
      width:calc(100% - 10px);
      width:-webkit-calc(100% - 10px);
      height:25px;
      outline:none;
      background:bisque;
      border-radius:12px;   
      overflow: hidden;
  }
  input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance:none;
      appearance:none;
      width:25px;
      height:25px;
      background:sienna;
      box-shadow: -100vw 0 0 calc(100vw - 12px) peru;
      cursor:pointer;
      border-radius: 50%; 
  
  
  

  2

  This comment has received 1 replyShow