Style lower and upper fill in HTML5 range input

by

First of all, read the article Styling Cross-Browser Compatible Range Inputs with CSS by Daniel Stern. His idea is to make the input invisible and then apply the custom styles.

He also developed an excellent online tool named randge.css in which you select the style preset and parameters and get auto generated CSS code like the following one:

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ac51b5;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}

body {
  padding: 30px;
}
<input type="range">

Yes, with CSS only it’s possible on IE only, but if you don’t mind to add some scripting it can be simulated with linear gradient. See the following sample: codepen.io/ryanttb/pen/fHyEJ

More Related Contents:

  1. How do you get the footer to stay at the bottom of a Web page?
  2. How do you easily horizontally center a using CSS? [duplicate]
  3. How to style HTML5 range input to have different color before and after slider?
  4. CSS Floating Divs At Variable Heights [duplicate]
  5. Footer at bottom of page or content, whichever is lower
  6. Is there a way to make a child DIV’s width wider than the parent DIV using CSS?
  7. 2 column div layout: right column with fixed width, left fluid
  8. Is float for layout bad? What should be used in its place?
  9. How to add a scrollbar to an HTML5 table?
  10. Font Awesome not working, icons showing as squares
  11. How do I style the HTML5 form validation error messages with CSS?
  12. How to create equal height columns in pure CSS [duplicate]
  13. How do I right align div elements?
  14. Right to Left support for Twitter Bootstrap 3
  15. What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
  16. How does object-fit work with canvas element?
  17. How to make a element expand or contract to its parent container?
  18. scale HTML5 Video and break aspect ratio to fill whole site
  19. Disable zoom on a div, but allow zoom on the page (an alternate div)
  20. How to auto adjust the height according to content in it?
  21. element not working in Internet Explorer 11
  22. Split Div Into 2 Columns Using CSS
  23. Why can’t I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
  24. How to add a search box with icon to the navbar in Bootstrap 3?
  25. Align vertically using CSS 3
  26. HTML5 image icon to input placeholder
  27. background-image doesn’t appear if is empty?
  28. Why adds extra top margin?
  29. Is there a way to style HTML5’s range control?
  30. Background image not displaying in chrome browser

Leave a Comment