NumberSpinner

by Gothor

HTML

<div class="numberSpinner">
    <div class="numberSpinnerArrows">
        <div class="numberSpinnerUpArrow">
            <input type="text" value="&#x25b4" readonly="readonly" />
            <div></div>
        </div>
        <div class="numberSpinnerDownArrow">
            <input type="text" value="&#x25be" readonly="readonly" />
            <div></div>
        </div>
    </div>
    <input type="text" class="numberSpinnerValue" />
</div>

CSS

.numberSpinner {
    display : inline-block;
    height : 1.2em;
}

.numberSpinnerValue {
    height : 1.2em;
}

.numberSpinnerArrows {
    float : right;
    height : 1.2em;
}

.numberSpinnerUpArrow, .numberSpinnerDownArrow {
    height : 0.6em;
    line-height : 0.6em;
    position : relative;
}

.numberSpinnerUpArrow div, .numberSpinnerDownArrow div {
    width : 15px;
    height : 0.6em;
    position : absolute;
    z-index : 1;
    margin-top : -0.6em;
    background-image : url('http://www.redplum.com/uploadedImages/Content/Only_At_RedPlum/1x1blank.gif');
}

.numberSpinnerUpArrow input, .numberSpinnerDownArrow input {
    width : 15px;
    height : 0.6em;
    border : none;
    cursor : default;
}

JavaScript

function wheelNumberSpinner(event) {
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta / 120;
    } else if (event.detail) {
        delta = -event.detail / 3;
    }

    var valeur = delta * 3 + parseInt(event.target.value ? event.target.value : 0);
    event.target.value = valeur;

    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

dojo.ready(function() {
    dojo.connect(dojo.query('.numberSpinnerUpArrow')[0], 'onclick', function() {
        var valeur = dojo.query('.numberSpinner > input')[0].value;
        if (valeur == null) valeur = 0;
        valeur++;
        dojo.query('.numberSpinner > input')[0].value = valeur;
    });

    dojo.ready(function() {
        dojo.connect(dojo.query('.numberSpinnerDownArrow')[0], 'onclick', function() {
            var valeur = dojo.query('.numberSpinner > input')[0].value;
            if (valeur == null) valeur = 0;
            valeur--;
            dojo.query('.numberSpinner > input')[0].value = valeur;
        });
    });

    if (dojo.query('.numberSpinner > input')[0].addEventListener) dojo.query('.numberSpinner > input')[0].addEventListener('DOMMouseScroll', wheelNumberSpinner, false);
    dojo.query('.numberSpinner > input')[0].onmousewheel = wheelNumberSpinner;
});