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
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
Share Improve this question asked Apr 9, 2012 at 9:19 Prasanth K CPrasanth K C 7,3426 gold badges42 silver badges63 bronze badges 5- 1 what do you mean by with larger max values the slider gets jumped to higher values ? Consider this example i've made for you jsfiddle/webdevel/aTaA8/2 – Vlad Minaev Commented Apr 9, 2012 at 9:51
- I think he means that there are less pixels than there are values, so it is impossible to get an exact value using the mouse. For example, you have values 1 -> 100, but the slider is only 50px wide, so the mouse gives you a resolution of 2, and the keyboard must be used to get the values in between. – Vincent McNabb Commented Apr 9, 2012 at 12:05
- Could you pls check this fiddle [link]jsfiddle/aniprasanth/aTaA8/4 . You can see that when we move slider with the mouse the value jumps from 0 to 11, 11 to 21 like that..even the step value is 1. – Prasanth K C Commented Apr 9, 2012 at 12:42
- there i need some help, How can we control the slider using keyboard with javascript. – Prasanth K C Commented Apr 9, 2012 at 12:54
- @PrasanthKC On your fiddle, once I click on the slider, I can use my arrow keys to slide it left and right. – MetalFrog Commented Apr 9, 2012 at 13:58
3 Answers
Reset to default 5You 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.
I found that, given that a script already exists for managing the slider, you just need to add to the slider the attribute "step" to set the amount of change caused by keypress.