combine slider with date input

showcases a simple example using the new input type range and date + using the new input event to combine those fields using the valueAsNumber property

by trixta

HTML

<script src="http://afarkas.github.com/webshim/js-webshim/minified/polyfiller.js"></script>
<form>
    <div>
        <!-- 86400000 = 1day || 1293840000000 = 2011/01/01 || 1325289600000 = 2911/12/31 -->
        <input type="range" step="86400000" max="1325289600000" min="1293840000000" value="1293840000000" id="rangeControlledByDate" />
        <input type="date" max="2011-12-31" min="2011-01-01" value="2011-01-01" id="dateControlledByRange" />
        
        
        
    </div>
    
</form>

CSS

#rangeControlledByDate {
    margin-left: 5px;
    width: 370px;
}

JavaScript

webshim.polyfill('forms forms-ext');

jQuery(function($) {

    $('#dateControlledByRange').on('input', function() {
        $('#rangeControlledByDate').prop('valueAsNumber', $.prop(this, 'valueAsNumber'));
    });
    $('#rangeControlledByDate').on('input', function() {
        $('#dateControlledByRange').prop('valueAsNumber', $.prop(this, 'valueAsNumber'));
    });
});