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.
Great, helped me achieve what I needed.