aria-range-slider
Version:
An accessible range slider
101 lines (83 loc) • 3.11 kB
HTML
<html lang="en">
<meta charset="UTF-8">
<title>ARIA Range Slider</title>
<style>
.input {
width: 100%;
}
.aria-slider {
margin: 10px 0;
height: 30px;
background-color: rgba(255, 0, 0, 0.1);
}
.aria-slider__bar {
background-color: red;
height: 4px;
padding-left: 7px;
padding-right: 7px;
position: relative;
top: 13px;
}
.aria-slider__track {
background-color: orange;
height: 4px;
}
.aria-slider__handle {
background-color: blue;
height: 30px;
margin-left: -7px; /* Half of width */
margin-top: -13px; /* Half of (track height - handle height) */
opacity: 0.5;
width: 14px;
}
</style>
<h2><input type="text"></h2>
<input class="input">
<input class="aria-range-slider">
<h2><input type="number"></h2>
<input type="number" class="input">
<input type="number" class="aria-range-slider">
<h2><input type="range"></h2>
<input type="range" class="input">
<input type="range" class="aria-range-slider">
<h2><input type="range" min="90"></h2>
<input type="range" min="90" class="input">
<input type="range" min="90" class="aria-range-slider">
<h2><input type="range" max"="10"></h2>
<input type="range" max="10" class="input">
<input type="range" max="10" class="aria-range-slider">
<h2><input type="range" value"="10"></h2>
<input type="range" value="10" class="input">
<input type="range" value="10" class="aria-range-slider">
<h2><input type="range" step"="10"></h2>
<input type="range" step="10" class="input">
<input type="range" step="10" class="aria-range-slider">
<h2><input type="range" min="0" max="10" value="2" step="1"></h2>
<input type="range" min="0" max="10" value="2" step="1" class="input">
<input type="range" min="0" max="10" value="2" step="1" class="aria-range-slider">
<h2><input type="range" min="10" max="5" value="15" step="1"></h2>
<input type="range" min="10" max="5" step="1" class="input">
<input type="range" min="10" max="5" step="1" class="aria-range-slider">
<h2><input type="range" min="1" max="10" value="1" step="2"></h2>
<input type="range" min="1" max="10" value="1" step="2" class="input">
<input type="range" min="1" max="10" value="1" step="2" class="aria-range-slider">
<h2><input type="range" min="1" max="10" value="10" step="2"></h2>
<input type="range" min="1" max="10" value="10" step="2" class="input">
<input type="range" min="1" max="10" value="10" step="2" class="aria-range-slider">
<script src="../index.js"></script>
<script>
(function() {
// new AriaRangeSlider(document.querySelectorAll('input')[21]);
// return;
var inputs = document.querySelectorAll('input');
for (var i = 0, input; input = inputs[i]; i++) {
input.onchange = function(event) {
console.log(event, event.currentTarget.value);
}
if (input.className == 'aria-range-slider') {
new AriaRangeSlider(input);
}
}
})();
</script>