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: #444;
}
span {
    font-size:15px;
    line-height: 15px;
    height: 15px;
    width:20px;
    display: block;
    cursor:pointer;
    text-align:center;
    border: 1px solid #ccc;
    border-bottom-color:#aaa;
    border-top-color: #eee;
    background-color: #ddd;
}
span:hover {
    color: #777;
    background-color: #eee;
}

JavaScript

$(document).ready(function(){
    var mouseIsDown = false;
    var element;
    var increment;
    $(".b span").mousedown(function(){
        mouseIsDown = true;
        element = $(this);
        increment = element.hasClass('up') ? 1 : -1;
        console.log(increment);
        setInterval(function(){
            changeValue(element, increment);
        },500);
    }).mouseup(function(){
        mouseIsDown =false;
        element = null;
        increment = null;
    });
    function changeValue(element, increment){
        if (!mouseIsDown) {
            element = null;
            return;
        };
        var inputBox = element.closest("div.step").find("input");
        console.log(element.text());
        inputBox.val(Number(inputBox.val())+increment);
    }
});