রেঞ্জ আন্ডারফ্লো − যদি এলিমেন্টের মান min অ্যাট্রিবিউটে নির্দিষ্ট মানের চেয়ে কম হয়, তবে এটি true সেট করে।
রেঞ্জ ওভারফ্লো − যদি এলিমেন্টের মান max অ্যাট্রিবিউটে নির্দিষ্ট মানের চেয়ে বেশি হয়, তবে এটি true সেট করে।
উদাহরণ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; } </style> </head> <body> <h1>Range Overflow and Range Underflow property</h1> Enter a number between 0 to 20<input type="number" class="num" min="0" max="20" step="1"></div> <button class="Btn">CHECK</button> <h3> Click on the above button to check if the number is between 0 and 20. </h3> <div style="color: green;" class="result"></div> <script> let resEle = document.querySelector(".result"); let numEle = document.querySelector('.num'); document.querySelector(".Btn").addEventListener("click", () => { if(numEle.validity.rangeOverflow){ resEle.innerHTML = 'Number exceeds the range'; } else if(numEle.validity.rangeUnderflow){ resEle.innerHTML = 'Number is lower than the range '; } else{ resEle.innerHTML = 'Number lies in the range'; } }); </script> </body> </html>
আউটপুট
উপরোক্ত কোড নিম্নলিখিত আউটপুট তৈরি করবে −
২০ এর উপরে নম্বর ইনপুট দিলে −
০ এর নিচে নম্বর ইনপুট দিলে −
