JSFiddle - React, Tailwind, and code Playground

by magicalex

HTML

<input type="text" id="spinner" size="1" value="0">
<label for="spinner">
    <span>&#9652;</span>
    <span>&#9662;</span>
</label>

CSS

#spinner {
    font-size: 24px;
    float:left;
    height: 31px;
}
label {
     float:left;
     height:30px;
    color: #777;
}
span {
    font-size:15px;
    line-height: 15px;
    height: 15px;
    width:20px;
    display: block;
    cursor:pointer;
    text-align:center;
    border: 1px solid #ddd;
    border-bottom-color:#bbb;
    border-top-color: #f0f0f0;
    background-color: #eee;
}
span:hover {
    color: #999;
    background-color: #f0f0f0;
}

JavaScript

var timer,
    value = 0;
    delay=300;
$('span').mousedown(function(){
    var increment = $(this).is(':first-of-type') ? 1 : -1;
    value+=increment;
    $('input').val(value);
    timer = setInterval(function(){
        value+=increment;
        $('input').val(value);
    }, delay);
}).mouseup(function(){ 
    clearInterval(timer);  
});