BootStrap Spinner

BootStrapSpinner

<div class="input-group spinner">
    <input type="text" class="form-control" value="@Model">
    <div class="input-group-btn-vertical">
        <span class="btn btn-default"><i class="glyphicon glyphicon-chevron-up"></i></span>
        <span class="btn btn-default"><i class="glyphicon glyphicon-chevron-down"></i></span>
    </div>
</div>

script

(function($) {
    $('.spinner .btn:first-of-type').on('click', function() {
        $('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1);
    });
    $('.spinner .btn:last-of-type').on('click', function() {
        $('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1);
    });
})(jQuery);

style

.spinner {
    width: 100px;
}
.spinner input {
    text-align: right;
}
.input-group-btn-vertical {
    position: relative;
    white-space: nowrap;
    width: 18px;
    vertical-align: middle;
    display: table-cell;
}
.input-group-btn-vertical > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    padding: 8px;
    margin-left: -1px;
    position: relative;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.input-group-btn-vertical > .btn:first-child {
    border-top-right-radius: 4px;
}
.input-group-btn-vertical > .btn:last-child {
    margin-top: -2px;
    border-bottom-right-radius: 4px;
}
.input-group-btn-vertical i{
    font-size: 10px;
    left: 3px;
    position: absolute;
    top: 2px;
}
.input-group-btn-vertical > .btn:last-child i{
    left: 2px;
    top: 3px;
}