add stepup stepdown buttons to input type="range"

by trixta

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<form action="#">
    <div class="form-row range-stepper">
        <button type="button" data-step="-10">-10</button>
        <input type="number" value="0" />
        <button type="button" data-step="10">+10</button>
    </div>
    <hr />
    <div class="form-row range-stepper show-activelabeltooltip">
        <button type="button" data-step="-10">-10</button>
        <input type="range" />
        <button type="button" data-step="10">+10</button>
    </div>
</form>
<p><a href="http://afarkas.github.io/webshim/demos/demos/cfgs/input-range.html" target="_blank">slider/range configurator</a>
</p>

CSS

form {
    margin: 10px auto;
    width: 400px;
}
.form-row {
    padding: 5px 10px;
}
label {
    display: block;
    margin: 3px 0;
}
.form-row input {
    padding: 3px 1px;
}
.form-row input[type="color"] {
    width: 120px;
}
.form-row input[type="range"] {
    width: 210px;
}
.form-row input[type="number"] {
    width: 50px
}
.hide-alpha .ws-number, .hide-alpha .number-input-buttons {
    display: none;
}

JavaScript

webshims.setOptions('forms-ext', {
    replaceUI: 'auto',
    types: 'range number'
});
webshims.polyfill('forms forms-ext');

$(function () {
    $('.range-stepper').numericStepButtons();
});

//simple jQuery plugin
$.fn.numericStepButtons = function () {
    return this.each(function () {
        var $numeric = $('input[type="range"], input[type="number"]', this).eq(0);

        $('[type="button"][data-step]', this).on('click', function () {
            var step = $(this).data('step');
            var stepped;
            try {
                $numeric.stepUp(step);
                stepped = true;
            } catch (e) {}
            if (stepped) {
                $numeric.trigger('input')
                    .trigger('change');
            }
            return false;
        });
    });
};