let years = [2000,2005,2008,2010]; function getClosest(arr, val) { return arr.reduce(function (prev, curr) { return (Math.abs(curr - val) < Math.abs(prev - val) ? curr : prev); }); } document.querySelector("#yearslider").addEventListener("change", function() { let closest = getClosest(years, this.value); this.value = document.querySelector("#rangevalue").value = closest; }); document.querySelector("#play").addEventListener("click", function() { let yearslider = document.querySelector("#yearslider"); let output = document.querySelector("#rangevalue"); years.forEach(function(item, index, array) { // set a timeout so each second one button gets clicked setTimeout( (function( index ) { return function() { yearslider.value = output.value = array[index]; }; }( index )), (2000 * index) ); }); });
<button id="play">Play</button> <input id="yearslider" class="range blue" type="range" min="2000" value="2000" max="2010" step="1" list="ticks"> <datalist id="ticks"> <option>2000</option> <option>2005</option> <option>2008</option> <option>2010</option> </datalist> <output id="rangevalue">2000</output>
#yearslider { width: 300px; }