Incrementing value continuously on mouse hold

Question

I have an HTML5 'range' control to which I want to add a plus (+) and minus (-) buttons on either sides.

The fiddle works fine, except that the value increase (or decrease) only once on 'click and hold'. While I want is it should increase (or decrease) continuously.

Fiddle

HTML,

<input type='button' id='minus'/>
<div class='range-container'>
    <input id='range' type='range' min='0' max='100' step='1'/>
</div>
<input type='button' id='plus'/>

JavaScript,

$('#plus').click(function() {
    $('#range').val(parseInt($('#range').val()) + 1);
});

$('#minus').click(function() {
    $('#range').val(parseInt($('#range').val()) - 1);
});

HTML5 'number' control have this experience natively.

Looked through SO, couldn't find this question anywhere. Closest I got is, this, which again does only one click.

Answer 1

You can use requestAnimationFrame to constantly check if any button is still pressed. If still pressed, you can increment or decrement your value.

• Create a 'number' variable that starts at zero.
• If the Add button is pressed, set an 'isDown' variable to 1.
• If the Subtract button is pressed, set the 'isDown' variable to -1.
• If any button is released, set the 'isDown' variable to 0;
• Start a requestAnimationFrame loop that constantly checks if 'isDown' is not zero. If not zero, requestAnimationFrame changes the 'number' variable by the isDown value.

Here's example code and a Demo:

var $result=$('#result');
var number=0;
var isDown=0;
var delay=250;
var nextTime=0;

requestAnimationFrame(watcher);

$("button").mousedown(function(e){handleMouseDown(e);});
$("button").mouseup(function(e){handleMouseUp(e);});
$("button").mouseout(function(e){handleMouseUp(e);});


function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // Put your mousedown stuff here
  isDown=(e.target.id=='Add')?1:-1;
}

function handleMouseUp(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // Put your mouseup stuff here
  isDown=0;
}

function watcher(time){
  requestAnimationFrame(watcher);
  if(time<nextTime){return;}
  nextTime=time+delay;
  if(isDown!==0){
    number+=isDown;
    $result.text(number);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id=Add>Add</button>
<button id=Subtract>Subtract</button>
<span id='result'>0</span>

Answer 2

Edit, Updated

Try

var range = $("#range")
, fx = function(elem, prop) {
  return elem
    .animate({
      value: range.prop(prop)
    }, {
      duration: 3000,
      easing: "linear",
      step: function(now) {
             elem.val(now + prop === ("max","+"||"min","-") + elem.prop("step"))
      }
    })
};

$('#plus').mousedown(function(e) {
  fx(range, "max")
});

$('#minus').mousedown(function minus(e) {
  fx(range, "min")
});

$(document).mouseup(function(e) {
  range.stop(true, false)
});

jsfiddle http://jsfiddle.net/bnesu3h9/3/

var range = $("#range")
, fx = function(elem, prop) {
  return elem
    .animate({
      value: range.prop(prop)
    }, {
      duration: 3000,
      easing: "linear",
      step: function(now) {
        elem.val(now + prop === ("max","+"||"min","-") + elem.prop("step"))
      }
    })
};

$('#plus').mousedown(function(e) {
  fx(range, "max")
});

$('#minus').mousedown(function minus(e) {
  fx(range, "min")
});

$(document).mouseup(function(e) {
  range.stop(true, false)
});

#plus {
  width: 15px;
  height: 15px;
  background-color: red;
  float: left;
}
#minus {
  width: 15px;
  height: 15px;
  background-color: blue;
  float: left;
}
.range-container {
  float: left;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' id='minus' />
<div class='range-container'>
  <input id='range' type='range' min='0' max='100' step='1' />
</div>
<input type='button' id='plus' />

Answer 3

This answer should help.

The click event includes mouseup and mousedown. You'll want to handle mousedown alone at first, and continuously check to see if the mouse is still down. You can stop checking on document mouseup.

Answer 4

The very basic approach to this is to start looping at certain interval while one of buttons is pressed, doing value changes at each tick. Start when button is clicked, stop when it's released. Here's simplistic code for concept demonstration purpose only:

// Store the reference
var range = $('#range');

// These functions will change the value
function increment () {
    range.val(parseInt(range.val()) + 1)
}

function decrement () {
    range.val(parseInt(range.val()) - 1)
}

// Attaches polling function to element
function poll (el, interval, fn) {
    var isHeldDown = false;

    return el
    .on("mousedown", function() {
        isHeldDown = true;

        (function loop (range) {
            if (!isHeldDown) return; // Stop if it was released
            fn();
            setTimeout(loop, interval); // Run the function again       
        })();
    })
    .on("mouseup mouseleave", function () {
        isHeldDown = false; // Stop polling on leave or key release
    });
}

poll($("#plus"), 40, increment);
poll($("#minus"), 40, decrement);

JSFiddle.

In production grade version you'd want to apply timing function instead of constant interval; think about all possible events that should start and stop the polling so it won't stuck forever when user moves pointer away or something; use requestAnimationFrame to control timing function more precisely.