CODEWITHSUNDEEP
javascriptjqueryhtml
Prasanth K C
Prasanth K C

Reputation: 7332

How can i move html5 range slider handle using keyboard arrow keys

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

Upvotes: 4

Views: 7609

Answers (3)

jumpjack
jumpjack

Reputation: 990

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.

Upvotes: 1

Vincent McNabb
Vincent McNabb

Reputation: 34739

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>

Upvotes: 5

Miguel Sanchez Gonzalez
Miguel Sanchez Gonzalez

Reputation: 9713

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.

Upvotes: 3

Related Questions