Ranged Input notification without Javascript
Tags: html, css, codenewbie, beginners
Published: 2020-07-07 07:55:09

![Imgur](https://i.imgur.com/qHdQMul.png)



Hello, 
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; It will apply the styles if the element within the specified range.
###out-of-range
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2.1) In range
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2.2) Out of range

#####1) Without focus:

 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; In this state the input border color is #ddd(gray) and no content in `paragraph` element which is next to the input element.
![ranged-input-without focus](https://i.imgur.com/jRNQePv.png?1)

#####2) With focus:
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; In this state we have applied in-range and out-of-range Pseudo-classes

#####2.1) In range:
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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;
}
```
![Imgur](https://i.imgur.com/qHdQMul.png)
#####2.2) Out of range
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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;
}
```
![Imgur](https://i.imgur.com/1NaGkxa.png)

Now we got the output 😍.
![Imgur](https://i.imgur.com/jggWglj.gif)

#source code:

{% codepen https://codepen.io/Alwar-G/pen/XWXEMEw %}

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