Test the limit of an input range and its immediate neighbors to catch condition mistakes.
<div class="demo"><div class="head"><b>BOUNDARY TEST</b><span>valid: 18–65</span></div><div class="scene"><div class="value" id="value">17</div><div class="track"><div class="low">17</div><div class="valid">18 … 65</div><div class="high">66</div></div><div class="result" id="result">FAIL</div></div><div class="foot"><span id="case">just below minimum</span><span>tap to test</span></div></div>.demo{width:min(94vw,690px);height:min(86vh,310px);padding:clamp(10px,2.4vmin,20px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(9px,2.5vmin,15px)/1.3 ui-monospace,monospace}.head,.foot{display:flex;justify-content:space-between;gap:8px}.head b{color:var(--accent)}.head span,.foot{color:var(--muted)}.foot{font-size:.82em}.scene{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(9px,3vmin,24px)}.value{font-size:clamp(26px,10vmin,56px);color:var(--accent);line-height:1}.track{width:90%;display:flex;text-align:center;border:1px solid var(--line);border-radius:7px;overflow:hidden}.track div{padding:clamp(5px,1.5vmin,10px) 2px;background:var(--bg)}.track .low,.track .high{width:20%;color:var(--muted)}.track .valid{width:60%;background:color-mix(in srgb,var(--accent) 20%,var(--surface));color:var(--accent)}.result{padding:.3em .8em;border-radius:5px;border:1px solid var(--accent-3);color:var(--accent-3)}.result.pass{color:var(--accent);border-color:var(--accent)}const values=[17,18,19,64,65,66],labels=['just below minimum','at minimum','just above minimum','just below maximum','at maximum','just above maximum'];let step=0;function test(){const value=values[step],pass=value>=18&&value<=65;document.getElementById('value').textContent=value;document.getElementById('result').textContent=pass?'PASS':'FAIL';document.getElementById('result').classList.toggle('pass',pass);document.getElementById('case').textContent=labels[step];step=(step+1)%values.length}test();const timer=setInterval(test,650);document.querySelector('.demo').addEventListener('pointerdown',()=>{clearInterval(timer);test()})Boundary value analysis probes where a valid input range begins and ends. For an inclusive age range of 18–65, try 17, 18, 19 and 64, 65, 66. A middle value alone can miss an off-by-one comparison.
The demo moves an age across those edges and shows whether it passes. Use boundary checks alongside representative values from each input class, and test missing or malformed inputs separately.
Use it for inputs with minimum or maximum limits, such as age, dates, quantity, and page size.