How to style range sliders in Webkit
The demo for this article can be found here.
The range input type allows the user to select a numerical value using a slider widget, and is placed on the page just like any other input type:
<input class=”bar” type=”range” id=”range” value=”50”/>
If you open this up in the browser you can see there is a simple range slider, with the value set at 50%. We can improve on this by adding a span which will contain the current value of the input, and by putting everything inside a div for styling purposes.
<input type="range" id="range" value="50"/>
Inside the span you can see we have the starting value for the slider, but we want this value to change as the position of the slider changes. For this we need to add some jQuery:
var span = $(‘#value’);
Now we have the functionality set up, let’s get started on the styling.
Styling the range input
We will start with the slider bar, giving it an increased height and a background color among other things. We can create style rules for input[type=”range’], or for the bar class we created for the slider:
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.6);
The first line gets rid of the default styles in WebKit browsers for this input type, then we add the background color, width, height, a small border radius to round the ends slightly, and finally a box shadow.
Now we have the bar looking the way we want, it’s time to move on to the thumb. This is where it gets specific to WebKit, as WebKit has a pseudo-element precisely for this purpose. It’s called, unsurprisingly, ::-webkit-slider-thumb. In the demo I used the following:
box-shadow: 1px 2px 3px rgba(0,0,0,0.6);
As you can see the first thing I did was to get rid of the default styles here too, then set a width and height. A border-radius of 50% makes it into a circle, and I added a little box shadow for depth and added a white background.
With the slider done, we can move on to the speech bubble where the value is displayed.
font-family: helvetica, arial;
border-width: 10px 10px 0;
border-color: #474747 transparent;
The rules for #value create a rounded rectangle, position at the end of the slider. With the :after pseudo-element we use a little CSS trick with borders in order to create the triangle you see in the demo.
For a finishing touch I added styles to the surrounding div and the body in the demo:
We have now successfully replicated the demo, and learned how to style the range input type. For the moment, this kind of customization is only available in WebKit browsers, but let’s hope it will be supported in all browsers in the near future.
Do you have an alternate way to style range sliders? What other inputs do you struggle to style? Let us know in the comments.