JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

#yearslider {
  width: 300px;
}

JavaScript

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