Menu
When i came across the html5 range slider with larger max values the slider gets jumped to higher values and cant able to take the middle vaues while moving with mouse. So im trying to control the slider using keyboard with the help of javascript or some other. im a newbie to this one. could anybody pls help me. Thanks in advance
622
You don't need to use Javascript to control the slider, but you do need a bit of help from Javacript to focus the slider element. If the user tabs to the element, it would work without any Javascript at all.
E.g.
<html><head><title>bla</title></head>
<body>
<input type="range" id="slider" min="0" max="100" value="50" />
<script type="text/javascript">
document.getElementById('slider').addEventListener('click', function() {
this.focus();
});
</script>
</body>
</html>
For multiple sliders, you can do this inside the <script> tag. You don't need any code on the individual sliders:
<script>
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == 'range') {
inputs[i].addEventListener('click', function() {
this.focus();
});
}
}
</script>
Maybe you need something like this : example in jsfiddle. The slider can be moved normally with the mouse but if you click the button you have a precision move with the arrows, if you click again, the listener is removed and the arrows do nothing.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
