remember this
[].slice.call(ranges).forEach()
by moob
HTML
<fieldset>
<legend><h3>Engine</h3></legend>
<output for="engine" id="engine">0</output>
<input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10">
<input type="checkbox" name="engine-closed" id="engine-closed" value="0" />
<label for="engine-closed">Closed</label>
</fieldset>
JavaScript
var ranges = document.querySelectorAll('fieldset input[type=range]');
var boxes = document.querySelectorAll('fieldset input[type=checkbox]');
[].slice.call(ranges).forEach(function(range) {
range.addEventListener('input', function() {
this.previousElementSibling.value = this.value;
});
});
[].slice.call(boxes).forEach(function(box) {
box.addEventListener('change', function() {
var range = this.previousElementSibling;
var event = new Event('input');//cool
range.value = 0;
range.dispatchEvent(event);
range.disabled = this.checked;
});
});