Ranged Input notification without Javascript

Hello,
          As the title says we are going to learn about How to get the notification of the ranged number input without using javascript?

Before we begin, we need to learn two Pseudo-classes

• in-range
• out-of-range

The important note about the above Pseudo-classes is that it should apply the styles only on the ranged elements.

in-range

            It will apply the styles if the element within the specified range.

out-of-range

            It will apply the styles if the element is out of the specified range.

Too much boring 🥱. Let's start

HTML

<div class="input-block">
  <p>Kindly type the number within the range of (0 -10)</p>
  <input type="number" min="0" max="20" />
  <p></p>
</div>

CSS

.input-block {
  text-align: center;
}
input[type="number"] {
  width: 200px;
  border: 5px solid #ddd;
  border-radius: 5px;
  outline: none;
  font-size: 24px;
}

input[type="number"]:in-range:focus {
  border-color: green;
  color: green;
}

input[type="number"]:in-range:focus + p::after {
  content: "✅ Correct Value";
  color: green;
}

input[type="number"]:out-of-range:focus {
  border-color: red;
  color: red;
}

input[type="number"]:out-of-range:focus + p::after {
  content: "❌ Wrong value";
  color: red;
}

From the above code, we have changed the styles of two elements. one is the input element and another one is paragraph element which is next to the input element.
Also, it has three states
1) Without focus
2) With focus
            2.1) In range
            2.2) Out of range

1) Without focus:

            In this state the input border color is #ddd(gray) and no content in paragraph element which is next to the input element.

2) With focus:

            In this state we have applied in-range and out-of-range Pseudo-classes

2.1) In range:

            Here, If we type the value within the range(0-20), then we will apply the border color and color of the input element as green and give the content of the paragraph as ✅ Correct Value

input[type="number"]:in-range:focus {
  border-color: green;
  color: green;
}

input[type="number"]:in-range:focus + p::after {
  content: "✅ Correct Value.";
  color: green;
}

2.2) Out of range

            Here If we type the value as out of the range(0-20), then we will apply the border color and color of the input element as red and give the content of the paragraph as ❌ Wrong value

input[type="number"]:out-of-range:focus {
  border-color: red;
  color: red;
}

input[type="number"]:out-of-range:focus + p::after {
  content: "❌ Wrong value";
  color: red;
}

Now we got the output 😍.

source code:

I hope you learned something. Thank you for reading this post 🙏.
Follow me on twitter at https://twitter.com/alwargak