Introduction:
When creating forms, one common task is to restrict input values to a specific range, such as limiting a number input between a minimum and maximum value. This can enhance user experience by preventing invalid data entry. In this tutorial, we will build a simple web page that uses HTML and CSS to set and style an input range. Our project will dynamically change the input field’s background color based on whether the input falls within the specified range.
Things You Will Learn:
- Setting input restrictions using HTML’s
minandmaxattributes - Applying CSS to style the input based on whether the value is within or outside the specified range
- How to create a visually appealing and responsive input field
Video Tutorial:
If you are interested to learn by watching a video tutorial rather reading a blog post you can check out the video down below. Also subscribe to my YouTube channel where I post new tutorials every alternate day.
Project Folder Structure:
Now before we move on to actual coding we create a project folder structure. We name the project folder as – ”Set Input Range With These Simple CSS Properties”. Within this folder we have a single file
- index.html
HTML:
We begin with the HTML code. Since the CSS isn’t that huge we have simply added internal CSS. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Set Input Range</title>
<style>
* {
font-family: "Poppins", sans-serif;
}
input {
font-size: 30px;
}
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
}
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
</style>
</head>
<body>
<h1>Range is set between 1 to 10</h1>
<input type="number" min="1" max="10" placeholder="num" />
</body>
</html>
Conclusion:
Congratulations! You just built a simple project that dynamically styles an input field based on its value. With only HTML and CSS, we managed to create a responsive and interactive number input that visually informs users when their input is out of range. This can be easily integrated into larger projects, especially when collecting user data that must meet specific criteria.
