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;
}