JSFiddle - React, Tailwind, and code Playground

Mouse event, number input control with double click reset

by Karmik Patel

HTML

<div id="outer">

  <div id="up_button">UP</div>
  <div id="textCounter"></div>
  <div id="down_button">DN</div>
  
</div>
Click and Hold on Orange to Increase,<br/>
Double click to reset
<br/>
<br/>
<br/>Further Improvement possible UI wise and code Wise

CSS

#textCounter {
    padding-left:22px;
    padding-top:20px;
    
    
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    
}

#up_button {
    background: red;
    color: #fff;
    
    
}
#down_button {
     background: green;
    color: #fff;
    
    
}

#outer{
    width: 200px;
    height: 100px;
    margin: 20px 0 0 20px;
    padding-left:22px;
    padding-top:20px;
    background: orange;
    
}

JavaScript

var timeout, 
clicker = $('#textCounter');
up = $('#up_button');
down = $('#down_button');

var count = 0;

up.mousedown(function(){
    
        timeout = setInterval(function(){
            if(count<101){
            	clicker.text(count++);
            }
        }, 50);
    return false;
});

down.mousedown(function(){
    
        timeout = setInterval(function(){
            if(count>0){
            	clicker.text(count--);
            }
        }, 50);
    return false;
});




clicker.dblclick(function(){
    /*timeout = setInterval(function(){
        clicker.text(count++);
    }, 50);*/
    count = 0;
    clicker.text(0);
		clearInterval(timeout);
    return false;
});


$(document).mouseup(function(){
    clearInterval(timeout);
    return false;
});