The range is one of the new input type introduced in HTML5. This input type allows one to input number within the specified range. The browsers will render this input type natively as a slider control. It’s a very intuitive user interface that we commonly find in an App. We can slide the handle bar to the right or left to produce the number within the range.

Safari and Opera are Webkit-based browsers. Though Chrome has decided to adopt its own engine, Blink, it looks like for the time being, Chrome still inherited several code bases from websites.
Webkit provides an easy way to style any input type, including range. To get started, we can select the input with the attribute selector and remove the native Webkit/Chrome styles by setting the -webkit-appearance to none.
  1. input[type=range] {  
  2.     -webkit-appearance: none  
  3. }  
From this stage, we can add anything such as border, background color, rounder border and so on.
  1. .input[type=range] {  
  2.     -webkit-appearance: none;  
  3.     width: 100%;  
  4.     border-radius: 8px;  
  5.     height: 7px;  
  6.     border: 1px solid #bdc3c7;  
  7.     background-color: #fff;   
  8. }  
To apply styles to it, we have to use Webkit proprietary pseudo-element selector ::-webkit-slider-thumb and similarly remove the native styles with -webkit-appearance, like so.
input[type='range']::-webkit-slider-thumb {
 -webkit-appearance: none;
 background-color: #ecf0f1;
 border: 1px solid #bdc3c7;
 width: 20px;
 height: 20px;
 border-radius: 10px;
 cursor: pointer;
}
And that’s how we style input type range in a Webkit browser. The style we added above should take effect on Chrome, Safari as well as the latest version of Opera. However, it would not affect Firefox and Internet Explorer as they run different engines. But we have workarounds for those two.

In Firefox

Adding styles directly with attribute selector input[type='range'] would not change the native styles of the input in Firefox. Instead, we have to use Firefox proprietary pseudo-element selector ::-moz-range-track and ::-moz-range-thumb.
The ::-moz-range-track will affect the input range track, while the ::-moz-range-thumbwill affect the input handle bar.
  1. .firefox input[type=range]::-moz-range-track {  
  2.     border-radius: 8px;  
  3.     height: 7px;  
  4.     border: 1px solid #bdc3c7;  
  5.     background-color: #fff;  
  6. }  
  7. .firefox input[type=range]::-moz-range-thumb {  
  8.     background: #ecf0f1;  
  9.     border: 1px solid #bdc3c7;  
  10.     width: 20px;  
  11.     height: 20px;  
  12.     border-radius: 10px;  
  13.     cursor: pointer;  
  14. }  

In Internet Explorer

Each of these input parts can be styled with IE proprietary pseudo-element ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-ticks, and ::-ms-tooltip. Here we will also apply the same styles as in Webkit and Firefox.
  1. input[type="range"]::-ms-fill-lower,  
  2. input[type="range"]::-ms-fill-upper {  
  3.     background: transparent;  
  4. }  
  5. input[type="range"]::-ms-track {  
  6.     border-radius: 8px;  
  7.     height: 7px;  
  8.     border: 1px solid #bdc3c7;  
  9.     background-color: #fff;  
  10. }  
  11. input[type="range"]::-ms-thumb {  
  12.     background-color: #ecf0f1;  
  13.     border: 1px solid #bdc3c7;  
  14.     width: 20px;  
  15.     height: 20px;  
  16.     border-radius: 10px;  
  17.     cursor: pointer;  
  18. }  
But the output is not something that we’ve expected. The tick marks is visible, while the top and bottom of the handle bar are hidden.
We can easily remove the tick marks by adding step="any" to the input element. However, making the handle bar fully visible is something that is not possible. It is as if the input element has the overflow set to hidden, but it cannot be undone just by setting overflow to visible. 

TAGS :