DEV Community

Cover image for Styling Range Sliders with CSS
Kevin Lewis
Kevin Lewis

Posted on

16 9

Styling Range Sliders with CSS

Alt Text

In this post I will cover how to custom style a HTML range input (the slider). You can also get this to work in Internet Explorer, but this guide will just cover Webkit-based browsers and Firefox.

The only thing you need to know terminology wise is that the long bar which indicates the length of the slider is called the 'track' and the knob that you slide along it is called the thumb.

Getting rid of the main default styling



input[type="range"] {
 -webkit-appearance: none;
}

input[type="range"]:focus {
 outline: none;
}


Enter fullscreen mode Exit fullscreen mode

Styling the track



input[type="range"]::-webkit-slider-runnable-track {
 background: tomato;
 height: 5px;
}

input[type="range"]::-moz-range-track {
 background: tomato;
 height: 5px;
}


Enter fullscreen mode Exit fullscreen mode

Styling the thumb



input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
 height: 15px;
 width: 15px;
 background: pink;
 margin-top: -5px;
 border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
 height: 15px;
 width: 15px;
 background: pink;
 margin-top: -5px;
 border-radius: 50%;
}


Enter fullscreen mode Exit fullscreen mode

You'll notice that the thumb requires a -webkit-appearance: none; in the webkit-prefixed version of these rules.

Alt Text

That's pretty much it! Have fun applying your own custom styles.

I recently added a border and box-shadow to the thumb, and a border-radius to the track, like so:

Alt Text

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more