Styling HTML range input and JQuery UI/Angular UI Slider with range.css — CSS Style Generator for Range Inputs
Input type=”range” and styling
What is range input?
HTML 5 introduced new control, range type input. However its name can be a little bit misleading, it’s just a slider. Besides typical use cases, like specifying from.. to ranges, this type of widgets are commonly used, for example, for displaying progress (like question 15 of 30, and then slider thumb is in the middle of the track)
Painful styling of input type=”range”
It is a very useful control, but it’s default look is a little but unattractive. And, anybody who tried to style it, felt real pain related with different pseudo-selectors used by different browsers.
Style generator for range input
Fortunately, we are not alone with this feeling and solution to this problem was found. It is range.css: CSS Style Generator for Range Inputs by Daniel Stern. It has some prebuilt styles, but it also gives us a possibility to fully customize styles. And finally, we can scope it with CSS class to do not brake other sliders in our code. So I have used it and this is result of playing with generator: CSSDesk: Custom input type range slider with CSS. And if we look at generated CSS, it is pretty complicated to figure out what is going on.
But, range input still has bad support in older browsers, it does not act well on Android Jelly Bean — which was important to me because I wanted to use it in Cordova application, and also it has problems in AngularJS: ng-model does not set initial value and position of input[type=range] #6726. So I have decided to use jQuery UI Slider, which has AngularJS wrapper facade: ui-slider from Angular UI. I wanted to use previously generated styles, so it required some work to apply them.
jQuery UI/Angular UI slider and styling
Styling thumb of jQuery UI Slider
Thumb in previous example (native range input) was styled with:
input[type=range].tm-slider::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid #000000;
height: 50px;
width: 50px;
border-radius: 50px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -24px;
}We can take this style, and apply it to .ui-slider-handle class responsible for thumb (with small modifications):
.ui-slider-handle {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d !important;
border: 0px solid #000000 !important;
height: 50px !important;
width: 50px !important;
border-radius: 50px;
background: #ffffff !important;
cursor: pointer;
-webkit-appearance: none;
margin-top: -21px;
}Only changes are !important rule and small change with margin, to have better positioning of thumb.
Track was styled with:
input[type=range].tm-slider::-webkit-slider-runnable-track {
width: 100%;
height: 2.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 25px;
border: 0.2px solid #010101;
}And without any changes we can apply it to .ui-slider-horizontal class:
.ui-slider-horizontal {
width: 100%;
height: 2.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 25px;
border: 0.2px solid #010101;
}Ąnd that’s all! Here’s final version: jQuery UI slider styled with range.css
Conclusion
It does not matter if you want to style native range input (very hard), or non-native like jQuery UI Slider (easier, but still not easy — especially if you are not a designer), it becomes easy if you use range.css: CSS Style Generator for Range Inputs by Daniel Stern. And it makes our forms much more fancy.
