Skip to content

Instantly share code, notes, and snippets.

@imjasonh

imjasonh/timerange.html

Created January 24, 2012 06:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save imjasonh/1668519 to your computer and use it in GitHub Desktop.
Save imjasonh/1668519 to your computer and use it in GitHub Desktop.
Download ZIP
HTML abomination to select a time range [0, 23]
Raw
timerange.html
<html>
<head>
<script type="text/javascript">
function get(id) {
return document.getElementById(id);
}
function updateLower() {
var value = get('lower').valueAsNumber;
get('upper').min = value + 1;
get('upper').style.width = '' + ((23 - value) * 10) + 'px';
get('upperpad').style.width = '' + ((23 - value) * 10) + 'px';
get('lowerout').innerText = '' + value + ':00';
}
function updateUpper() {
var value = get('upper').valueAsNumber;
get('lower').max = value - 1;
get('lower').style.width = '' + (value * 10) + 'px';
get('lowerpad').style.width = '' + ((23 - value) * 10) + 'px';
get('upperout').innerText = '' + value + ':00';
}
</script>
<style>
input {
width: 230px;
}
#upper {
float: right;
}
table, tr, td {
border-collapse: 0;
border: 0;
border-spacing: 0;
}
.x {
width: 250px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="x">
<input type="range" id="lower" min="0" max="22" value="0" oninput="updateLower();"/>
<span id="lowerpad">&nbsp;</span>
</td>
<td id="lowerout">0:00</td>
</tr>
<tr>
<span id="loweroutpad"></span>
<span id="middle"></span>
<span id="upperoutpad"></span>
</tr>
<tr>
<td class="x">
<span id="upperpad">&nbsp;</span>
<input type="range" id="upper" min="1" max="23" value="23" oninput="updateUpper();"/>
</td>
<td id="upperout">23:00</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment