<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>
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; }); }); };
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; }