Continuous increase in value while holding the mouse

Question

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

The violin works fine, except that the value increases (or decreases) only once on 'press and hold' . As long as I want, it has to constantly increase (or decrease).

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); }); 

Managing HTML5 'number' has this experience natively.

Looked through SO, could not find this question anywhere. Closest I got this one , which again makes only one click.

Answer 1

You can use requestAnimationFrame to constantly check if any button is pressed. If you still pressed, you can increase or decrease the value.

• Create a variable 'number' that starts from zero.
• If you click the Add button, set the variable isDown to 1.
• If you click the Subtract button, set the isDown variable to -1. A.
• If any button is released, set the 'isDown' variable to 0;
• Run the requestAnimationFrame loop, which constantly checks if "isDown" is not null. If nonzero, requestAnimationFrame changes the 'number' variable to isDown.

Here is a sample code and 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

Change, update

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 . First you will only need to process mousedown and constantly check to see if the mouse is left. You can stop checking the mouseup document.

Answer 4

The easiest approach to this is to start a cycle at a certain interval while one of the buttons is pressed, making changes to the values ​​at each tick. Start when the button is pressed, stop when it is released. Here's a simplified code for demonstrating 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 the production class version, you want to use the synchronization function instead of a constant interval; think about all the possible events that should start and stop the survey so that it does not get stuck forever when the user moves the pointer or something else; use requestAnimationFrame for more precise timing control.