Skip to content

Instantly share code, notes, and snippets.

Created May 26, 2012 02:59
What would you like to do?
data binding attributes
input[type="range"] {
vertical-align: middle;
margin: 2em;
font-size: 14px;
height: 20px;
input[type="range"]::after {
content: attr(data-value) '/' attr(max);
position: relative;
left: 135px;
top: -20px;
<input type="range" min="0" max="100" value="25">
var input = document.querySelector('input');
input.dataset.value = input.value;
input.addEventListener('change', function(e) {
this.dataset.value = this.valueAsNumber;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment