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:

range input slider default styling

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • CSS Styling the Audio Element

    There are a few things you can do with CSS to style the HTML audio element in various browsers.

  • How to Get WP RSS Aggregator Feed to Validate

    I’m using the plugin WP RSS Aggregator, and I couldn’t get the custom feed to validate in other places. The validator said that it was missing an <author> field. If an item doesn’t have an author, then the feed doesn’t even supply an empty one. The way to fix it is to go to wp-content/plugins/wp-rss-aggregator/templates/custom-feed/entry.twig ... Read more

  • How to Remove Rank Math Top Banner

    Rank Math has added an ugly top banner to the sites using its plugin. Here's how to hide it.

  • Fix for High CPU Usage on Siteground

    The MailPoet cron job on my website was triggered by Google Bot and caused my CPU seconds on Siteground to go over the quota. Here's how I fixed it.

  • Fast MIDI Song Starter

    Here is a really easy way to build MIDI chord progressions using iRealPro.

  • What is Full Kontakt Required?

    Perhaps you don't know what Kontakt is or how it works. Hopefully we can sort these things out and get you on your way to making some music.

  • How To Style a Range Input Slider

    If you are going to build a custom html audio player, you will need to know how to style a range input slider.

  • How to Build a HTML Audio Player with Vanilla JS (Part 2)

    Here is another tutorial on how to build a custom html audio player with vanilla js.

  • Coding a Custom HTML Audio Player (Part 1)

    Here is a starter tutorial on how to create a custom HTML audio player with HTML and JavaScript.