CSS

How to style range sliders in Webkit

HTML5 saw the introduction of several new form input types, including range. This means that range sliders can be created in HTML itself, although initially it tended not to be used, firstly because of JavaScript alternatives already in use, and secondly because of the lack of adaptable components. In most browsers there is still no way to completely customize an input slider, but webkit browsers do provide some nice control.

The demo for this article can be found here.

The input

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. 

<div id="slider">
    <span id="value">50</span>
    <input type="range" id="range" value="50"/>
</div> 

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: 

$(‘#range’).change(function(){
    var span = $(‘#value’);
    span.html(this.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:

input[type=”range”] {
    -webkit-appearance: none;
    background-color: #D64928;
    height: 15px;
    width: 170px;
    border-radius: 5px;
    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:

input[type=”range”]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    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.

#value {
    display: block;
    position: relative;
    width: 40px;
    height: 20px;
    padding: 5px;
    background: #474747;
    border-radius: 10px;
    text-align: center;
    color: white;
    font-family: helvetica, arial;
    font-weight: bold;
    top: 35px;
    left:190px;
}
#value:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 15px;
    border-style: solid;
    border-width: 10px 10px 0;
    border-color: #474747 transparent;
    display:block;
    width: 0;
    z-index: 1;
}

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:

body {
    background: url(‘bg.png’);
}
#slider {
    background: rgba(0,0,0,0.5);
    width: 300px;
    border-radius: 10px;
    margin: auto;
    margin-top: 250px;
}

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.

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website. More articles by Sara Vieira
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress