kazu69/data-bind.html

## data-bind.html
<!--
http://ericbidelman.tumblr.com/post/23615290220/data-binding-using-data-attributes
-->
<style>
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;
}
</style>
</head>
<body>

<input type="range" min="0" max="100" value="25">

<script>
var input = document.querySelector('input');
input.dataset.value = input.value;

input.addEventListener('change', function(e) {
  this.dataset.value = this.valueAsNumber;
});
</script>
</body>
</html>
	<!--
	http://ericbidelman.tumblr.com/post/23615290220/data-binding-using-data-attributes
	-->
	<style>
	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;
	}
	</style>
	</head>
	<body>

	<input type="range" min="0" max="100" value="25">

	<script>
	var input = document.querySelector('input');
	input.dataset.value = input.value;

	input.addEventListener('change', function(e) {
	this.dataset.value = this.valueAsNumber;
	});
	</script>
	</body>
	</html>