How can I change a numeric input field with the mouse or touch?

StackOverflow https://stackoverflow.com/questions/11605127

Question

I would like to create an input field where you can click/touch into and then move up or down to change the value of the field until you release the mouse/finger.

This should work in recent browsers and on Android and iPhones.

Was it helpful?

Solution

here is a quick and easy way to do it

<!doctype html>
<html>
  <head>
    <script type='text/javascript'>
      var startY;
      function loadJs(){
        document.getElementById("upDownInput").onmousedown = startMoveUpDown;
      }      

      function startMoveUpDown(e){
        startY = e.clientY;
        document.onmousemove = moveUpDown;
        document.onmouseup = endMoveUpDown;
      }

      function moveUpDown(e){
        var input = document.getElementById("upDownInput");
        var moveChange = Math.ceil(e.clientY - startY);        
        input.value = moveChange;
      }

      function endMoveUpDown(){
        document.onmousemove = null;
      }
    </script>
  </head>

  <body onload='loadJs()'>
    <input style='margin-top: 200px' value='0' type='number' id='upDownInput'/>
  </body>
</html>

OTHER TIPS

You might want to checkout jQuery UI's slider for a reliable, cross-browser slider.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top