How To Style a Range Input Slider

In our previous posts we discussed the html audio tag, how to customize the audio tag with css, and how to build a custom html audio player. In creating our custom audio player we used range input sliders for both the volume controls and the scrubber/seek bar. Styling these slider components is not simple and straightforward so here are some helpful tips.

Let’s give our slider a class attribute of my-slider:

<input type="range" class="my-slider" min="0" step="1" value="">

By default in Google Chrome it looks like this:

Now let’s add some styling. There is one unusual step you have to do first, though – you have to remove the default styling with -webkit-appearance: none;

.my-slider {
     -webkit-appearance: none;
}

The Range Input Track

Then after that there are some basics you might want to try. If you want a vertical slider try within your css selector:

transform: rotate(270deg);

For the slider track you can use many of the regular CSS styles for any inline-block element such as

height
width
border
border-radius
background-color
etc...

If it is not looking right in Google Chrome, Mozilla Firefox or older Microsoft browsers, you could try adding these pseudo-selectors:

.my-slider,
.my-slider::-webkit-slider-runnable-track
.my-slider::-moz-range-track, 
.my-slider::-ms-track {
     -webkit-appearance: none;
     /* etc */
}

The Input Range Thumb

The handle with which you change the range value is called the “thumb.” I have no idea why. But you can style it. Again you’ll have to set the -webkit-appearance to none.

.my-slider,
.my-slider::-webkit-slider-thumb
.my-slider::-moz-range-thumb,
.my-slider::-ms-thumb {
     -webkit-appearance: none;
     /* etc */
}

You can use the pseudo-selectors together as shown above or as separate selectors to change the appearance from browser to browser.

Below is a Codepen to play around with your ideas. Feel free to branch off of this and let us know hat you;ve come up with in the comments below.

See the Pen Range Input Slider Playgorund Sandbox by Point Clear Media (@pointclearmedia) on CodePen.

In future posts we will begin to discuss the web audio api and how to start doing more advanced things with html audio.