How to Create a Range Slider in HTML + CSS

How annoying would it be if you had to use a dropdown menu or a text input to change the volume on your computer? That’s why we have range sliders — to let users easily pick a number in a range of values.

Of the many new form elements introduced with HTML5, the range slider is one of the most common. Before, you’d need JavaScript to create a simple slider. But now, you can create it only using HTML (and style it with CSS). In this post, we’ll show you how.

What is a range slider in HTML?

A range slider is an HTML input type that allows a user to select a single value in the range between two values. In most cases, it consists of a horizontal or vertical bar with a handle that the user adjusts with their cursor or finger.

Image Source

You’ve probably seen this most often when adjusting the volume in your browser or on a device. They can also be used for picking a specific value from a relatively large or continuous scale of values, when an individual-select option (like radio buttons) wouldn’t be practical.

You may even see range sliders with two handles, letting you choose a range within a range. A good example of this is in Airbnb’s search function. When you filter by price range, the handles mark the lower and upper bound of your desired price range.

Image Source

How to Create a Range Slider with HTML

Let’s start by creating a basic slider with just HTML. To add the slider element to the page, I’ll use the input element with type range.

See the Pen html slider: basic example 1 by HubSpot (@hubspot) on CodePen.

Even with this basic tag, you can toggle the attributes of input to change the slider’s behavior:

• The min attribute designates the lowest value allowed in the range. The default value is 0.
• The max attribute designates the largest value allowed in the range. The default value is 100.
• The value attribute is the default value that’s selected when the slider loads. The default value is halfway between the min and max values.

We can also add an additional attribute, step, which sets the interval between options in the range. The default value is one, but notice how the feel of the slider changes if I increase the value of step to 20:

See the Pen html slider: basic example with steps by HubSpot (@hubspot) on CodePen.

If we want to display the numeric value of the users current selection, we can do so by adding the attribute oninput=“rangeValue.innerText = this.value” and add the paragraph tag <p id=“rangeValue”>100</p> to display this value:

See the Pen html slider: basic example 2 by HubSpot (@hubspot) on CodePen.

How to Style a Range Slider with CSS

As you can see, we can make a very basic slider with HTML alone. However, you probably want it to look better than that, and that’s where CSS comes in.

To alter slider with CSS, I’ll add the class slider to the input tag and target the slider with some basic CSS:

See the Pen html slider: add css 1 by HubSpot (@hubspot) on CodePen.

Here I’ve changed the slider’s default width and height, removed the border and rounded the edges, and made the background orange.

The slider handle is still blue, though. We can change that by targeting the pseudo-element ::-webkit-slider-thumb.

See the Pen html slider: add css 2 by HubSpot (@hubspot) on CodePen.

Much better — the handle is more visible, fits better inside the slider bar, and even changes the cursor to a pointer to signal that the user can interact with it.

Finally, if we want to make the slider vertical, we can use the transform property to rotate the slider by 270 degrees.

See the Pen html slider: vertical by HubSpot (@hubspot) on CodePen.

Add a range slider to your page.

Range sliders have an advantage over a simple input field when you need access to a wide range of numbers. There are many cases where you can use a range slider such as volume control, ratings, scores, weight limits, and the list goes on. Play around with the styling to make a custom slider that fits the look of your site.