Health Infobase Design Manual
Table of contents
Timeline slider
Timeline sliders allow users to see data for a specific time period.
On this page
When to use
- When the data covers a long period time
- To allow zooming in and out of a long time period
What to avoid
- Don’t use a timeline slider if the period covered is short
- Don’t use sliders if it’s not meaningful to look at different time periods
Design and code
Instructions
The data throughout the page changes to reflect the date range you select below. Select a date range from the drop-down menu, use the slider to define your date range, or type the dates directly into the From and To boxes.
HTML
<!-- Add these references -->
<link rel="stylesheet" href="/src/js/noUiSlider-15.5.1/dist/nouislider.css">
<link rel="stylesheet" href="/src/css/selectpicker/bootstrap-select.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
<!-- Add this HTML where you want the slider -->
<h3>Instructions</h3>
<p>
<i class="fa fa-info-circle" aria-hidden="true"></i> The data throughout the page changes to reflect the date range you select below. Select a date range from the drop-down menu, use the slider to define your date range, or type the dates directly into the From and To boxes.
</p>
<div class="col-md-12 sliderDiv" style="margin-top: 20px;margin-bottom: 20px;border: 1px solid black; padding: 30px 20px 40px 20px; border: 3px solid #ccc; border-radius: 10px;">
<div>
<span style="font-size:30px;font-weight:bold;">
<span class="badge hidden-xs" style="font-size: 30px;padding: 10px 10px;background: rgb(51, 160, 44);">
<i class="far fa-calendar-alt"></i>
</span>
<label for="dateSelection">Show data <span class="hidden-xs">reported</span> for <span class="wb-inv"> your selected preset date range:</span>
</label>
<select id="dateSelection">
<option selected value="alltime">all time</option>
<option value="thisyear">this year</option>
<option value="lastyear">last year</option>
<option value="lastmonth">last month</option>
<option value="customrange">custom date range</option>
</select>
</span>
<div style="display: none;">
<input type="date" id="startdate" name="startdate" min="2021-03-27" max="2022-05-07" data-role="none">
</div>
<div class="row" style="margin: 0 auto; margin-top: 15px;">
<div class="col-xs-6 col-lg-2 dateStartDiv" style="padding-left: 0px;">
<label for="dateStart">From</label>
<select data-width="150px" data-dropdownAlignRight="true" data-dropupAuto="false" data-live-search="true" class="selectpicker" id="dateStart"></select>
</div>
<div class="col-xs-6 col-lg-2 col-lg-push-8 dateEndDiv" style="padding-right: 0px;">
<label for="dateEnd">To</label>
<select data-width="150px" data-dropdownAlignRight="true" data-dropupAuto="false" data-live-search="true" class="selectpicker" id="dateEnd"></select>
</div>
<div id="slider" class="col-xs-12 col-lg-pull-2 col-lg-8"></div>
</div>
</div>
</div>CSS
.actionBtn {
/*background-color: lightgray;*/
border: 1px solid lightgray;
/*font-weight: bold;*/
margin: 3px;
border-radius: 4px;
}
.bootstrap-select>.dropdown-toggle {
background: white;
border: 3px solid black;
}
.dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
@media only screen and (max-width: 1200px) {
#slider {
display: inline-block;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 70px;
width: 80.6% !important;
}
}
#slider {
display: inline-block;
margin-left: 40px;
margin-right: 40px;
width: 58%;
margin-top: 25px;
}
.noUi-connect {
background: rgb(51, 160, 44);
}
.noUi-pips {
color: #000;
}
.noUi-marker {
background: #000;
}
.noUi-value-large {
font-size: 15px;
}JS
<!-- Add these references -->
<script src="/src/js/d3.v5.min.js"></script>
<script src="/src/js/noUiSlider-15.5.1/dist/nouislider.js"></script>
<script src="/src/js/bootstrap-select/bootstrap-select.js"></script>
<!-- Add this script to change from normal dropdown to multi -->
<script type="text/javascript">
let dates = ["2020-10-29", "2020-11-01", "2020-11-05", "2020-11-06", "2020-11-08", "2020-11-09", "2020-11-12", "2020-11-15", "2020-11-16", "2020-11-19", "2020-11-22", "2020-11-23", "2020-11-26", "2020-11-29", "2020-11-30", "2020-12-01", "2020-12-03", "2020-12-04", "2020-12-06", "2020-12-07", "2020-12-08", "2020-12-09", "2020-12-10", "2020-12-11", "2020-12-13", "2020-12-14", "2020-12-15", "2020-12-16", "2020-12-17", "2020-12-18", "2020-12-20", "2020-12-21", "2020-12-22", "2020-12-23", "2020-12-24", "2020-12-27", "2020-12-28", "2020-12-29", "2020-12-30", "2020-12-31", "2021-01-03", "2021-01-04", "2021-01-05", "2021-01-06", "2021-01-07", "2021-01-08", "2021-01-10", "2021-01-11", "2021-01-12", "2021-01-13", "2021-01-14", "2021-01-15", "2021-01-17", "2021-01-18", "2021-01-19", "2021-01-20", "2021-01-21", "2021-01-22", "2021-01-24", "2021-01-25", "2021-01-26", "2021-01-27", "2021-01-28", "2021-01-29", "2021-01-31", "2021-02-01", "2021-02-02", "2021-02-03", "2021-02-04", "2021-02-05", "2021-02-07", "2021-02-08", "2021-02-09", "2021-02-10", "2021-02-11", "2021-02-12", "2021-02-14", "2021-02-15", "2021-02-16", "2021-02-17", "2021-02-18", "2021-02-19", "2021-02-21", "2021-02-22", "2021-02-23", "2021-02-24", "2021-02-25", "2021-02-26", "2021-02-28", "2021-03-01", "2021-03-02", "2021-03-03", "2021-03-04", "2021-03-05", "2021-03-07", "2021-03-08", "2021-03-09", "2021-03-10", "2021-03-11", "2021-03-12", "2021-03-14", "2021-03-15", "2021-03-16", "2021-03-17", "2021-03-18", "2021-03-19", "2021-03-21", "2021-03-22", "2021-03-23", "2021-03-24", "2021-03-25", "2021-03-26", "2021-03-27", "2021-03-28", "2021-03-29", "2021-03-30", "2021-03-31", "2021-04-01", "2021-04-03", "2021-04-04", "2021-04-05", "2021-04-06", "2021-04-07", "2021-04-08", "2021-04-10", "2021-04-11", "2021-04-12", "2021-04-13", "2021-04-14", "2021-04-15", "2021-04-17", "2021-04-18", "2021-04-19", "2021-04-20", "2021-04-21", "2021-04-22", "2021-04-23", "2021-04-24", "2021-04-25", "2021-04-26", "2021-04-27", "2021-04-28", "2021-04-29", "2021-04-30", "2021-05-01", "2021-05-02", "2021-05-03", "2021-05-04", "2021-05-05", "2021-05-06", "2021-05-07", "2021-05-08", "2021-05-09", "2021-05-10", "2021-05-11", "2021-05-12", "2021-05-13", "2021-05-14", "2021-05-15", "2021-05-16", "2021-05-17", "2021-05-18", "2021-05-19", "2021-05-20", "2021-05-21", "2021-05-22", "2021-05-23", "2021-05-24", "2021-05-25", "2021-05-26", "2021-05-27", "2021-05-28", "2021-05-29", "2021-05-30", "2021-05-31", "2021-06-01", "2021-06-02", "2021-06-03", "2021-06-04", "2021-06-05", "2021-06-06", "2021-06-07", "2021-06-08", "2021-06-09", "2021-06-10", "2021-06-11", "2021-06-12", "2021-06-13", "2021-06-14", "2021-06-15", "2021-06-16", "2021-06-17", "2021-06-19", "2021-06-20", "2021-06-21", "2021-06-22", "2021-06-23", "2021-06-24", "2021-06-25", "2021-06-26", "2021-06-27", "2021-06-28", "2021-06-29", "2021-06-30", "2021-07-01", "2021-07-02", "2021-07-03", "2021-07-04", "2021-07-05", "2021-07-06", "2021-07-07", "2021-07-08", "2021-07-09", "2021-07-10", "2021-07-11", "2021-07-12", "2021-07-13", "2021-07-14", "2021-07-15", "2021-07-16", "2021-07-17", "2021-07-18", "2021-07-19", "2021-07-20", "2021-07-21", "2021-07-22", "2021-07-23", "2021-07-24", "2021-07-25", "2021-07-26", "2021-07-27", "2021-07-28", "2021-07-29", "2021-07-30", "2021-07-31", "2021-08-01", "2021-08-02", "2021-08-03", "2021-08-04", "2021-08-05", "2021-08-06", "2021-08-07", "2021-08-08", "2021-08-09", "2021-08-10", "2021-08-11", "2021-08-12", "2021-08-13", "2021-08-14", "2021-08-15", "2021-08-16", "2021-08-17", "2021-08-18", "2021-08-19", "2021-08-20", "2021-08-21", "2021-08-22", "2021-08-23", "2021-08-24", "2021-08-25", "2021-08-26", "2021-08-27", "2021-08-28", "2021-08-29", "2021-08-30", "2021-09-01", "2021-09-02", "2021-09-03", "2021-09-04", "2021-09-05", "2021-09-06", "2021-09-07", "2021-09-08", "2021-09-09", "2021-09-10", "2021-09-11", "2021-09-12", "2021-09-13", "2021-09-14", "2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19", "2021-09-20", "2021-09-21", "2021-09-22", "2021-09-23", "2021-09-24", "2021-09-25", "2021-09-26", "2021-09-27", "2021-09-28", "2021-09-29", "2021-09-30", "2021-10-01", "2021-10-02", "2021-10-03", "2021-10-04", "2021-10-05", "2021-10-06", "2021-10-07", "2021-10-08", "2021-10-09", "2021-10-10", "2021-10-11", "2021-10-12", "2021-10-13", "2021-10-14", "2021-10-15", "2021-10-16", "2021-10-17", "2021-10-18", "2021-10-19", "2021-10-20", "2021-10-21", "2021-10-22", "2021-10-23", "2021-10-24", "2021-10-25", "2021-10-26", "2021-10-27", "2021-10-28", "2021-10-29", "2021-10-30", "2021-10-31", "2021-11-01", "2021-11-02", "2021-11-03", "2021-11-04", "2021-11-05", "2021-11-06", "2021-11-07", "2021-11-08", "2021-11-09", "2021-11-10", "2021-11-11", "2021-11-12", "2021-11-13", "2021-11-14", "2021-11-15", "2021-11-16", "2021-11-17", "2021-11-18", "2021-11-19", "2021-11-20", "2021-11-21", "2021-11-22", "2021-11-23", "2021-11-24", "2021-11-25", "2021-11-26", "2021-11-27", "2021-11-28", "2021-11-29", "2021-11-30", "2021-12-01", "2021-12-02", "2021-12-03", "2021-12-04", "2021-12-05", "2021-12-06", "2021-12-07", "2021-12-08", "2021-12-09", "2021-12-10", "2021-12-11", "2021-12-12", "2021-12-13", "2021-12-14", "2021-12-15", "2021-12-16", "2021-12-17", "2021-12-18", "2021-12-19", "2021-12-20", "2021-12-21", "2021-12-22", "2021-12-23", "2021-12-25", "2021-12-26", "2021-12-27", "2021-12-28", "2021-12-29", "2021-12-30", "2021-12-31", "2022-01-01", "2022-01-02", "2022-01-03", "2022-01-04", "2022-01-05", "2022-01-06", "2022-01-07", "2022-01-08", "2022-01-09", "2022-01-10", "2022-01-11", "2022-01-12", "2022-01-13", "2022-01-14", "2022-01-15", "2022-01-16", "2022-01-17", "2022-01-18", "2022-01-19", "2022-01-20", "2022-01-21", "2022-01-22", "2022-01-23", "2022-01-24", "2022-01-25", "2022-01-26", "2022-01-27", "2022-01-28", "2022-01-29", "2022-01-30", "2022-01-31", "2022-02-01", "2022-02-02", "2022-02-03", "2022-02-04", "2022-02-05", "2022-02-06", "2022-02-07", "2022-02-08", "2022-02-09", "2022-02-10", "2022-02-11", "2022-02-12", "2022-02-13", "2022-02-14", "2022-02-15", "2022-02-16", "2022-02-17", "2022-02-18", "2022-02-19", "2022-02-20", "2022-02-21", "2022-02-22", "2022-02-23", "2022-02-24", "2022-02-25", "2022-02-26", "2022-02-27", "2022-02-28", "2022-03-01", "2022-03-02", "2022-03-03", "2022-03-04", "2022-03-05", "2022-03-06", "2022-03-07", "2022-03-08", "2022-03-09", "2022-03-10", "2022-03-11", "2022-03-12", "2022-03-13", "2022-03-14", "2022-03-15", "2022-03-16", "2022-03-17", "2022-03-18", "2022-03-19", "2022-03-20", "2022-03-21", "2022-03-22", "2022-03-23", "2022-03-24", "2022-03-25", "2022-03-26", "2022-03-27", "2022-03-28", "2022-03-29", "2022-03-30", "2022-03-31", "2022-04-01", "2022-04-02", "2022-04-03", "2022-04-04", "2022-04-05", "2022-04-06", "2022-04-07", "2022-04-08", "2022-04-09", "2022-04-10", "2022-04-11", "2022-04-12", "2022-04-13", "2022-04-14", "2022-04-15", "2022-04-16", "2022-04-17", "2022-04-18", "2022-04-19", "2022-04-20", "2022-04-21", "2022-04-22", "2022-04-23", "2022-04-24", "2022-04-25", "2022-04-26", "2022-04-27", "2022-04-28", "2022-04-29", "2022-04-30", "2022-05-01", "2022-05-02", "2022-05-03", "2022-05-04", "2022-05-05", "2022-05-06", "2022-05-07", "2022-05-08", "2022-05-09", "2022-05-10", "2022-05-11", "2022-05-12", "2022-05-13", "2022-05-14", "2022-05-15", "2022-05-16", "2022-05-17", "2022-05-18", "2022-05-19", "2022-05-20", "2022-05-21", "2022-05-22", "2022-05-23", "2022-05-24", "2022-05-25", "2022-05-26", "2022-05-27", "2022-05-28", "2022-05-29", "2022-05-30", "2022-05-31", "2022-06-01", "2022-06-02", "2022-06-03", "2022-06-04", "2022-06-05", "2022-06-06", "2022-06-07", "2022-06-08", "2022-06-09", "2022-06-10", "2022-06-11", "2022-06-12", "2022-06-13", "2022-06-14", "2022-06-15", "2022-06-16", "2022-06-17", "2022-06-18", "2022-06-19", "2022-06-20", "2022-06-21", "2022-06-22", "2022-06-23", "2022-06-24", "2022-06-25", "2022-06-26", "2022-06-27", "2022-06-28", "2022-06-29", "2022-06-30", "2022-07-01", "2022-07-02", "2022-07-03", "2022-07-04", "2022-07-05", "2022-07-06", "2022-07-07", "2022-07-08", "2022-07-09", "2022-07-10", "2022-07-11", "2022-07-12", "2022-07-13", "2022-07-14", "2022-07-15", "2022-07-16", "2022-07-17", "2022-07-18", "2022-07-19", "2022-07-20", "2022-07-21", "2022-07-22", "2022-07-23", "2022-07-24", "2022-07-25", "2022-07-26", "2022-07-27", "2022-07-28", "2022-07-29", "2022-07-30", "2022-07-31", "2022-08-01", "2022-08-02", "2022-08-03", "2022-08-04", "2022-08-05", "2022-08-06", "2022-08-07", "2022-08-08", "2022-08-09", "2022-08-10", "2022-08-11", "2022-08-12", "2022-08-13", "2022-08-14", "2022-08-15", "2022-08-16", "2022-08-17", "2022-08-18", "2022-08-19", "2022-08-20", "2022-08-21", "2022-08-22", "2022-08-23", "2022-08-24", "2022-08-25", "2022-08-26", "2022-08-27", "2022-08-28", "2022-08-29", "2022-08-30", "2022-08-31", "2022-09-01", "2022-09-02", "2022-09-03", "2022-09-04", "2022-09-05", "2022-09-06", "2022-09-07", "2022-09-08", "2022-09-09", "2022-09-10", "2022-09-11", "2022-09-12", "2022-09-13", "2022-09-14", "2022-09-15", "2022-09-16", "2022-09-17", "2022-09-18", "2022-09-19", "2022-09-20", "2022-09-21", "2022-09-22", "2022-09-23", "2022-09-24", "2022-09-25", "2022-09-26", "2022-09-27", "2022-09-28", "2022-09-29", "2022-09-30", "2022-10-01", "2022-10-02", "2022-10-03", "2022-10-04", "2022-10-05", "2022-10-06", "2022-10-07", "2022-10-08", "2022-10-09", "2022-10-10", "2022-10-11", "2022-10-12", "2022-10-13", "2022-10-14", "2022-10-15", "2022-10-16", "2022-10-17", "2022-10-18", "2022-10-19", "2022-10-20", "2022-10-21", "2022-10-22", "2022-10-23", "2022-10-24", "2022-10-25", "2022-10-26", "2022-10-27", "2022-10-28", "2022-10-29", "2022-10-30", "2022-10-31", "2022-11-01", "2022-11-02", "2022-11-03", "2022-11-04", "2022-11-05", "2022-11-06", "2022-11-07", "2022-11-08", "2022-11-09", "2022-11-10", "2022-11-11", "2022-11-12", "2022-11-13", "2022-11-14", "2022-11-15", "2022-11-16", "2022-11-17", "2022-11-18", "2022-11-19", "2022-11-20", "2022-11-21", "2022-11-22", "2022-11-23", "2022-11-24", "2022-11-25", "2022-11-26", "2022-11-27", "2022-11-28", "2022-11-29", "2022-11-30", "2022-12-01", "2022-12-02", "2022-12-03", "2022-12-04", "2022-12-05", "2022-12-06", "2022-12-07", "2022-12-08", "2022-12-09", "2022-12-10", "2022-12-11", "2022-12-12", "2022-12-13", "2022-12-14", "2022-12-15", "2022-12-16", "2022-12-17", "2022-12-18", "2022-12-19", "2022-12-20", "2022-12-21", "2022-12-22", "2022-12-23", "2022-12-24", "2022-12-25", "2022-12-26", "2022-12-27", "2022-12-28", "2022-12-29", "2022-12-30", "2022-12-31", "2023-01-01", "2023-01-02", "2023-01-03", "2023-01-04", "2023-01-05", "2023-01-06", "2023-01-07", "2023-01-08", "2023-01-09", "2023-01-10", "2023-01-11", "2023-01-12"]
let init_startIndex = 0;
let init_endIndex = dates.length - 1;
let slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [init_startIndex, init_endIndex],
connect: true,
step: 1,
margin: 1,
keyboardPageMultiplier: 15, // Default 5
// keyboardMultiplier: 50, // Default 1
range: {
'min': 0,
'max': dates.length - 1
},
pips: {
// mode: 'steps',
// // values: 3,
// filter: function(d){
// return 0;
// },
// density: 2,
mode: 'count',
values: 3,
density: 2,
stepped: true,
format: {
// 'to' the formatted value. Receives a number.
to: function(value) {
return dates[Math.round(value)];
},
// 'from' the formatted value.
// Receives a string, should return a number.
from: function(value) {
return dates.indexOf(value);
}
}
}
});
addInteraction();
function addInteraction() {
function createDatalist(startDateString, endDateString) {
d3.selectAll("#dateStart option").remove();
d3.select("#dateEnd").selectAll("option").remove();
let startIndex = document.getElementById('slider').noUiSlider.get()[0];
let endIndex = document.getElementById('slider').noUiSlider.get()[1];
dates.forEach(function(d, i) {
if (i >= 0 && i < endIndex) {
d3.select("#dateStart").append("option").attr("value", d).text(d)
}
if (i >= dates.length && i < startIndex) {
d3.select("#dateEnd").append("option").attr("value", d).text(d)
}
})
// $('#dateStart').reverseChildren()
$('#dateStart').val(dates[parseInt(startIndex)])
// $('#dateEnd').reverseChildren()
$('#dateEnd').val(dates[parseInt(endIndex)])
$('#dateStart,#dateEnd').selectpicker({
dropdownAlignRight: true,
dropupAuto: false,
size: 5
});
$('.selectpicker').selectpicker('refresh')
$('.dateStartDiv .filter-option-inner-inner').text(dates[parseInt(startIndex)]).attr("title", dates[parseInt(startIndex)])
$('.dateEndDiv .filter-option-inner-inner').text(dates[parseInt(endIndex)]).attr("title", dates[parseInt(endIndex)])
}
createDatalist(dates[0], dates[dates.length - 1])
$(".dateStartDiv .dropdown-toggle").keyup(function(event) {
if (event.keyCode === 13) {
$('.dateStartDiv .selectpicker').selectpicker('toggle')
}
});
$(".dateEndDiv .dropdown-toggle").keyup(function(event) {
if (event.keyCode === 13) {
$('.dateEndDiv .selectpicker').selectpicker('toggle')
}
});
$("#dateStart").on("change", function(event) {
let currString = $(this).val()
let endDateString = $("#dateEnd").val();
createDatalist(currString, endDateString)
setSliderHandles(currString, endDateString)
// updateTable(nestedData_region_site_fraction_date_entries);
// updateTitleDates()
// setPage_qs();
})
$("#dateEnd").on("change", function(d, i) {
let currString = $(this).val();
let startDateString = $("#dateStart").val();
createDatalist(startDateString, currString)
setSliderHandles(startDateString, currString);
// updateTable(nestedData_region_site_fraction_date_entries);
// updateTitleDates()
// setPage_qs();
})
$("#dateSelection").on("change", function() {
let dropdownVal = $(this).val();
if (dropdownVal == "customrange") {
// updateTable(nestedData_region_site_fraction_date_entries);
} else if (dropdownVal == "alltime") {
let firstDate = dates[0]
let lastDate = dates[dates.length - 1]
setSliderHandles(firstDate, lastDate)
} else if (dropdownVal == "thisyear") {
let thisYear = new Date().getFullYear();
let thisYearDates = dates.filter(function(d, i) {
return d.indexOf(thisYear) != -1;
})
let firstDateThisYear = thisYearDates[0]
let mostRecenttDateThisYear = thisYearDates[thisYearDates.length - 1]
setSliderHandles(firstDateThisYear, mostRecenttDateThisYear)
} else if (dropdownVal == "lastyear") {
let lastYear = new Date().getFullYear() - 1;
let lastYearDates = dates.filter(function(d, i) {
return d.indexOf(lastYear) != -1;
})
let firstDateLastYear = lastYearDates[0]
let mostRecenttDateLastYear = lastYearDates[lastYearDates.length - 1]
setSliderHandles(firstDateLastYear, mostRecenttDateLastYear)
} else if (dropdownVal == "lastmonth") {
let lastMonth = new Date();
lastMonth.setMonth(lastMonth.getMonth() - 1)
let thisYear = lastMonth.getFullYear();
lastMonth = lastMonth.getMonth() + 1;
if (lastMonth < 10) lastMonth = "0" + lastMonth
let lastMonthDates = dates.filter(function(d, i) {
return d.indexOf(thisYear + "-" + lastMonth) != -1;
})
// console.log(lastMonthDates)
let firstDateLastMonth = lastMonthDates[0]
let mostRecenttDateLastMonth = lastMonthDates[lastMonthDates.length - 1]
setSliderHandles(firstDateLastMonth, mostRecenttDateLastMonth)
// check month part of date string to see if lastMonth.getMonth() index not -1
}
// __SETTINGS.dateSel = dropdownVal;
// setPage_qs();
});
let setSliderHandles = function(firstDate, lastDate) {
let startIndex = dates.indexOf(firstDate)
let endIndex = dates.indexOf(lastDate)
slider.noUiSlider.set([startIndex, endIndex])
$('.dateStartDiv .filter-option-inner-inner').text(dates[parseInt(startIndex)]).attr("title", dates[parseInt(startIndex)])
$('.dateEndDiv .filter-option-inner-inner').text(dates[parseInt(endIndex)]).attr("title", dates[parseInt(endIndex)])
// $('#dateEnd').val(dates[parseInt(lastIndex)])
createDatalist(dates[parseInt(startIndex)], dates[parseInt(endIndex)])
// $('#dateStart').attr("placeholder", (dates[parseInt(startIndex)]))
// $('#dateEnd').attr("placeholder", (dates[parseInt(endIndex)]))
// updateTable(nestedData_region_site_fraction_date_entries);
// filterData(originalData, true);
// updateTitleDates()
}
document.getElementById('slider').noUiSlider.on('slide', function(e) {
let startIndex = document.getElementById('slider').noUiSlider.get()[0];
let endIndex = document.getElementById('slider').noUiSlider.get()[1];
$('.dateStartDiv .filter-option-inner-inner').text(dates[parseInt(startIndex)]).attr("title", dates[parseInt(startIndex)])
$('.dateEndDiv .filter-option-inner-inner').text(dates[parseInt(endIndex)]).attr("title", dates[parseInt(endIndex)])
$("#dateSelection").val("customrange")
})
document.getElementById('slider').noUiSlider.on('change', function(e) {
// Slider selection finished, do a ting below
let startIndex = document.getElementById('slider').noUiSlider.get()[0];
let endIndex = document.getElementById('slider').noUiSlider.get()[1];
//console.log(dates[parseInt(startIndex)], dates[parseInt(endIndex)])
createDatalist(dates[parseInt(startIndex)], dates[parseInt(endIndex)])
// updateTable(nestedData_region_site_fraction_date_entries);
// filterData(originalData, true);
// updateTitleDates();
// setPage_qs();
})
}
</script>Content and design guidelines
- Make the default time period a significant period that shows interesting data. Depending on the data, this could be the last 2 weeks, or the last 6 months, etc.
- Follow the general design guidelines
Accessibility guidelines
- Follow the general accessibility guidelines
- Date modified: