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 sundaramkumar

HTML

<script src="http://afarkas.github.com/webshim/js-webshim/minified/polyfiller.js"></script>
<h3>Datetime slider</h3>
<br/><br/>
<form>
    <div>
        <!-- 86400000 = 1day || 1293840000000 = 2011/01/01 || 1325289600000 = 2911/12/31 -->
        <input type="range" step="86400000" min="1262304000000" max="1325289600000" value="1262304000000" id="rangeControlledByDate" /> <br/>
          <input type="range" step="60000" min="1262304000000" max="1262390399000" value="1262304000000" id="rangeControlledByDate1" /> <br/>
        <input type="date" max="2011-12-31" min="2010-01-01" value="2010-01-01" id="dateControlledByRange" />
        
        <br/>
        output: <output id="output" for="rangeInput"></output><br/> <!-- Just to display selected value -->
valueHover : <span id="selVal"></span><br/>
valueSeeked :  <span id="seek"></span><br/>
valueHover expect to be equal valueSeeked : <span id="test"></span><br/>
        
    </div>
    
</form>

CSS

#rangeControlledByDate{
    margin-left: 5px;
    width: 360px;
    /* max-width: 730px; */
}
#rangeControlledByDate1 {
    margin-left: 5px;
    width: 365px;
    /* max-width: 730px; */
}

#console {
    border-bottom: 1px solid #ccc;
    background-color: #eee;
    height: 100px;
    overflow: auto;
    position:absolute;
    bottom:1px;
    width:100%;
}

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

}); */
 $('#rangeControlledByDate1').on('input', function() {
        console.log($.prop(this, 'valueAsNumber'));
    });
var valueHover = 0, curVal=0;

function calcSliderPos(e) {
  /* console.log(e.offsetX,e.target.clientWidth) */
  if(e.offsetX <=0 )
  	curVal = e.target.getAttribute('min')
  else if(e.offsetX >=e.target.clientWidth)
  	curVal = e.target.getAttribute('max')
  else
  	curVal = (parseInt( e.target.getAttribute('min'),10) + parseInt( e.offsetX * e.target.getAttribute('step'),10) )/1000
    
    console.log(curVal )
    return curVal;
    /* return (e.offsetX / e.target.clientWidth) *  parseInt(e.target.getAttribute('max'),10) */;
}
//attach to slider and fire on mousemove
    document.getElementById('rangeControlledByDate1').addEventListener('mousemove', function(e) {
      valueHover = calcSliderPos(e);
      /* console.log( valueHover) */
//      document.getElementById('seek').innerHTML = e.target;  
console.log(valueHover,convertEpochToLocalDateTime(valueHover,true))
      document.getElementById('output').innerHTML = valueHover; //convertEpochToLocalDateTime(valueHover,true);
      $('#dateControlledByRange').prop('valueAsNumber', $.prop(this, 'valueAsNumber'));
    });
    
 function convertEpochToLocalDateTime(dt,isGMT) {
    var convertToGMTString = isGMT || false;
    var sourceEpoch = parseInt(dt);

    if (isNaN(sourceEpoch)) {
      // console.log('Invalid Timestamp');
    } else {
      if (sourceEpoch <= 9999999999) {
        sourceEpoch *= 1000;
      }
      // console.log(new Date(sourceEpoch));
      var options = { hour12: false };
      var date = new...