JSFiddle - React, Tailwind, and code Playground

by magicalex

HTML

<div class="step">
    <input type="input" name="amount" maxlength="3" size="3" value="0" />
    <div class="b">
            <span class="up">&#9652;</span>
            <span class="down">&#9662;</span>
    </div>
</div>

CSS

.step input {
    font-size: 24px;
    float:left;
    width:40px;
    height: 31px;
}
.step .b {
     float:left;
     height:30px;
    color: #444;
}
.step span.up, .step span.down {
    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;
}
.step span:hover {
    color: #777;
    background-color: #eee;
}

JavaScript

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