Skip to content

Instantly share code, notes, and snippets.

@MANTENN

MANTENN/index.html

Last active November 27, 2019 21:30
Show Gist options
  • Save MANTENN/62057a5530d10aca1bb97b3a86fcbd2e to your computer and use it in GitHub Desktop.
Save MANTENN/62057a5530d10aca1bb97b3a86fcbd2e to your computer and use it in GitHub Desktop.
Download ZIP
Next level UX **Fixed**
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Next level UX</title>
<meta charset="UTF-8" />
</head>
<body>
<p>
Please enter your phone number:<br />
<label>
Area Code:<br />
<input
id="I1"
type="range"
min="100"
value="415"
max="9999999999"
oninput="str = this.value; A.innerText = `(${str.substr(0,3)})`"
/>
<br />
</label>
<label>
First 3 Digits:<br />
<input
id="I2"
type="range"
min="000"
value="123"
max="999"
oninput="str = this.value; N1.innerText = `${str.substr(0,3)}`"
/>
<br />
</label>
<label>
Remaining 4 Digits:<br />
<input
id="I3"
type="range"
min="0000"
value="4567"
max="9999"
oninput="str = this.value; N2.innerText = `${str.substr(0,4)}`"
/>
<br />
<span id="A"></span>-<span id="N1"></span>-<span id="N2"></span>
<script>
I1.oninput();
I2.oninput();
I3.oninput();
</script>
</label>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment