添加辅助滑块手柄

Question

JSFiddle link

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    <!-- Code to add second date picker -->
    <input type="date" max="2011-12-31" min="2011-01-01" value="2011-07-01" id="dateControlledByRange2" />
    <!-- Code for secondary date slider-->
    <!-- ??? -->
    <!-- 86400000 = 1day || 1293840000000 = 2011/01/01 || 1325289600000 = 2011/12/31  || 
        week = 604800000 || 15/Sep/2015 == 1442275200000 
        
        "http://www.epochconverter.com-->
    <input type="range" step="604800000" max="1442275200000" min="1293840000000" value="1293840000000" id="rangeControlledByDate" />
    <input type="date" max="2015-9-15" min="2011-01-01" value="2011-01-01" id="dateControlledByRange" />

  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

我无法在上面添加第二个句柄并将其连接到第一个日期选择器。这将允许用户通过日期选择器或通过2个滑块手柄选择日期范围。