How to style HTML5 range input to have different color before and after slider?

by

Pure CSS solution:

  • Chrome: Hide the overflow from input[range], and fill all the space left to
    thumb with shadow color.
  • IE: no need to reinvent the wheel: ::-ms-fill-lower
  • Firefox no need to reinvent the wheel: ::-moz-range-progress
/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="range"] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }
    
    input[type="range"]::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type="range"]::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -80px 0 0 80px #43e5f7;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}
<input type="range"/>

More Related Contents:

  1. How to remove the border highlight on an input text element
  2. Disable webkit’s spin buttons on input type=”number”?
  3. Webkit CSS to control the box around the color in an input[type=color]?
  4. Add a text suffix to
  5. Is it possible to always show up/down arrows for input “number”?
  6. How do I remove all default Webkit search field styling?
  7. using a div to blur an image behind it? [duplicate]
  8. CSS Button styling – Need some help -html css RADIO BUTTON LINK
  9. Advantages of using display:inline-block vs float:left in CSS
  10. Align elements side by side
  11. Child inside parent with min-height: 100% not inheriting height
  12. Matching an empty input box using CSS
  13. How can I center into a div?
  14. Canvas has white space at the bottom and scrolls too far
  15. How to make a floated div 100% height of its parent?
  16. How do I re-trigger a WebKit CSS animation via JavaScript?
  17. How to make fixed header table inside scrollable div?
  18. CSS endless rotation animation
  19. Align two inline-blocks left and right on same line
  20. Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
  21. Webkit backface visibility not working
  22. blur of part of Background image with css
  23. Two Divs next to each other, that then stack with responsive change
  24. Make HTML5 video poster be same size as video itself
  25. How to align a div to the top of its parent but keeping its inline-block behaviour?
  26. Why does stacking order change on webkit filter hover?
  27. How to push a footer to the bottom of page when content is short or missing?
  28. How to get rid of x and up/down arrow elements of a input date?
  29. Is there a way to style HTML5’s range control?
  30. input type=”image” shows unwanted border in Chrome and broken link in IE7

Leave a Comment