Can you imagine the burden of increasing your computer volume with a dropdown selection box? How about inputting text or numbers to leave a review instead of clicking on your star rating? I am sure you can imagine how much more inconvenient it would be compared to using the range slider you normally have access to.
Among many of the new form elements introduced with HTML5, the range slider is one of the most commonly used. Previously, you would need JavaScript to create a simple slider. Lucky for us, you can create it only using HTML. In this post, we will cover how to custom and style an HTML slider with the visual appeal of CSS.![Download Now: 50 Code Templates [Free Snippets]](https://no-cache.hubspot.com/cta/default/53/34adf7eb-7945-49c4-acb8-f7e177b323e5.png)
What is a range slider in HTML?
Think of a range slider as an input that allows you to select a value by manipulating a sliding control or bar. This control can move either to the right or left, allowing you to select from a range of values. It's akin to the sliders you'd find when adjusting your computer's volume or brightness levels. Sometimes, the slider may have icons on one or both ends of the bar, allowing users to select a specific range with the help of JavaScript.
Range sliders are especially useful when:
- You are aware of the upper and lower limits of the range.
- You need access to a broad range of numbers.
- You expect the user to frequently adjust their input (e.g., volume control).
So, let's create an HTML and CSS file and dive right into it!
Creating a Slider with HTML + CSS
HTML Slider Input
To begin, paste the following code into your coding environment of choice. For quick results, CodePen is a great option. The results show a basic slider that can adjust from 0 to 200.
HTML Breakdown
Now, let's dissect this code:
- <div class="slider"> - The class name "slider" is wrapping all the HTML code in this div for CSS styling purposes. We will call this class in our CSS file.
- <input type="range"> - The "range" input type allows you to specify a numeric value which must be no less and no more than a given value. In our case, we will use the input to create a slider control. The default range is 0 to 100. You can set restrictions on accepted numbers using the attributes below.
- min - the minimum value allowed in the range. The default is 0.
- max - the maximum value allowed in the range. The default is 100.
- step - the legal number of intervals within the range. The default is 1.
- value - the default value or starting value once the page is loaded. The default value is halfway between the minimum and maximum number in most cases but you have the option to change it to whatever you like. In our example, once the page is loaded, the slider button should already be at 100.
- oninput="rangeValue.innerText = this.value"> , <p id="rangeValue">10</p> - The range input doesn't present a numerical readout of it's value by default. Therefore, we assigned the variable "oninput" to the rangeValue in order to view the range of numbers. The <p id> tag simply prints the numeric value on the screen.
CSS Slider Input Range
As you can see, a very basic slider can be created with only HTML. However, we may want to add a more positive visual impression to enhance the user's experience. This can be done by pasting the following CSS code to your coding environment. The results will display a colored range slider with a border around it.
In the HTML code we created a class name "slider" and added CSS styling to everything within the class. Feel free to adjust the CSS code to your liking.
The Results
Great. You have now created a range slider and understand the inputs and attributes involved. Your results should look something like this:
More Slider Examples
If you would like to customize your slider further, take a look at these examples.
Creating a Range Slider With Tick Marks
Tick mark sliders are beneficial if you need a range slider with more precision. In this example, we will build a volume control. Take a look below.
HTML:
CSS:
Results:
Creating a Vertical Range Slider
A vertical range slider is excellent for preserving space on your webpage. Take a look on how you can create a numeric vertical slider in the below example.
HTML:
CSS:
Results:.gif?width=250&height=313&name=giphy%20(8).gif)
Creating a Gradient Range Slider
You can add a gradient range slider for a more dynamic feel to your website. See the example gradient slider below.
HTML:
CSS:
Results: 
Build Robust Applications with HTML Slider
Range sliders have an advantage over a simple input field when you need access to a wide range of numbers. This is because it can reduce the number of unnecessary errors due to inaccurate entries. There are many cases where you can use a range slider such as volume control, ratings, scores, weight limits, and the list goes on. Enjoy applying your own custom range slider styles to the awesome website you will build.
