combine type range input with a number input

by trixta

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<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>

CSS

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

JavaScript

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