Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add a Range Slider using HTML?
The HTML range slider is an interactive control that allows users to select a numeric value from a specified range by dragging a handle along a track. Range sliders are commonly used for settings like volume control, brightness adjustment, price filters, and other numeric input scenarios where approximate values are more important than precise entry.
Range sliders are created using the <input type="range"> element, which provides a native, accessible way to implement slider controls without requiring external libraries.
Syntax
Following is the basic syntax for creating a range slider in HTML
<input type="range" min="minValue" max="maxValue" value="defaultValue" step="stepValue">
HTML Input Range Attributes
The range input type supports several important attributes that control its behavior
min Specifies the minimum value (default is 0)
max Specifies the maximum value (default is 100)
value Sets the initial/default value
step Defines the increment between values (default is 1)
disabled Disables the slider
name Used for form submission
Basic Range Slider
Following example demonstrates a simple range slider with default styling
<!DOCTYPE html> <html> <head> <title>Basic Range Slider</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Default Range Slider</h2> <label for="basicSlider">Volume (0-100):</label> <input type="range" id="basicSlider" name="volume" min="0" max="100" value="50"> <p>Current value: 50</p> </body> </html>
The output displays a horizontal slider with a handle positioned at the middle value
Default Range Slider Volume (0-100): [======?=======] Current value: 50
Interactive Range Slider with JavaScript
Following example shows how to display the current value dynamically using JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Interactive Range Slider</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change The Value Using Slider</h2>
<label for="interactiveSlider">Select Value (1-99):</label>
<input type="range" min="1" max="99" value="32" id="interactiveSlider">
<p>Value: <span id="sliderValue">32</span></p>
<script>
var slider = document.getElementById("interactiveSlider");
var output = document.getElementById("sliderValue");
// Update the current slider value
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html>
When the user moves the slider, the displayed value updates in real-time. Moving the slider to different positions will show values between 1 and 99
Change The Value Using Slider Select Value (1-99): [===?=====] Value: 45 (updates as slider moves)
Customized Range Slider Styling
Following example demonstrates how to create a custom-styled range slider with CSS
<!DOCTYPE html>
<html>
<head>
<title>Custom Styled Range Slider</title>
<style>
.slider-container {
width: 80%;
margin: 20px 0;
}
.custom-slider {
-webkit-appearance: none;
width: 100%;
height: 8px;
border-radius: 5px;
background: #ddd;
outline: none;
transition: background 0.3s;
}
.custom-slider:hover {
background: #bbb;
}
/* Webkit browsers (Chrome, Safari) */
.custom-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
transition: background 0.3s;
}
.custom-slider::-webkit-slider-thumb:hover {
background: #45a049;
}
/* Firefox */
.custom-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
border: none;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Custom Styled Range Slider</h2>
<div class="slider-container">
<label for="customSlider">Brightness (0-100):</label>
<input type="range" min="0" max="100" value="75" class="custom-slider" id="customSlider">
<p>Brightness: <span id="brightnessValue">75</span>%</p>
</div>
<script>
var slider = document.getElementById("customSlider");
var output = document.getElementById("brightnessValue");
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html>
This creates a sleek, modern-looking slider with a green circular thumb and smooth transitions
Custom Styled Range Slider Brightness (0-100): [======?===] Brightness: 75%
Range Slider with Step Values
Following example shows how to use the step attribute to control the increment values
<!DOCTYPE html>
<html>
<head>
<title>Range Slider with Steps</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Price Range Slider</h2>
<label for="priceSlider">Maximum Price ($0 - $1000):</label>
<input type="range" min="0" max="1000" value="250" step="50" id="priceSlider">
<p>Max Price: $<span id="priceValue">250</span></p>
<script>
var slider = document.getElementById("priceSlider");
var output = document.getElementById("priceValue");
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html>
With step="50", the slider only allows values in increments of 50 (0, 50, 100, 150, etc.)
Price Range Slider Maximum Price ($0 - $1000): [==?======] Max Price: $250
Common Use Cases
Range sliders are particularly useful in the following scenarios
Volume Controls Audio and video players
Brightness/Contrast Image editing and display settings
Price Filters E-commerce product filtering
Age/Date Ranges Search and filter forms
Rating Systems User feedback and reviews
Progress Indicators Installation or loading progress
Browser Compatibility
The <input type="range"> element is well-supported across modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers that don't support range inputs, they will fall back to displaying a text input field.
Conclusion
HTML range sliders provide an intuitive way for users to select numeric values from a specified range. They can be easily customized with CSS and made interactive with JavaScript. The <input type="range"> element offers built-in accessibility features and works across all modern browsers, making it an excellent choice for numeric input controls.
680 Views
