<form action="#"> <div class="form-row number-range-combi show-activevaluetooltip"> <input type="number" value="0" min="0" max="10000" required="" data-number-stepfactor="10" /> <input type="range" value="0" max="10000" data-range-stepfactor="100" /> </div> </form> <p><a href="http://afarkas.github.io/webshim/demos/demos/cfgs/input-range.html" target="_blank">slider/range configurator</a></p> <p><a href="http://afarkas.github.io/webshim/demos/demos/cfgs/input-number.html" target="_blank">number configurator</a></p>
webshim.setOptions('forms-ext', { replaceUI: 'auto', types: 'range', widgets: { number: { calculateWidth: false } } }); webshim.polyfill('forms forms-ext'); $(function(){ $('.number-range-combi').combineNumberRange(); }); //simple jQuery plugin adjust to your needs $.fn.combineNumberRange = function(){ return this.each(function(){ var timer; var range = $('input[type="range"]', this); var number = $('input[type="number"]', this); function onRangeChange(){ number.val(range.val()); } function onNumberChange(){ if(number.is(':valid')){ range.val(number.val()); } } range.on('input change', function(e){ clearTimeout(timer); timer = setTimeout(onRangeChange, 0); }); number.on('input change', function(e){ clearTimeout(timer); timer = setTimeout(onNumberChange, 0); }); }); };
form { margin: 20px auto; width: 420px; } .form-row { padding: 5px 10px; } label { display: block; margin: 3px 0; } .form-row input { padding: 3px 1px; } .form-row input[type="range"] { width: 310px; } .form-row input[type="number"], .form-row .ws-number { width: 75px; text-align: right; }