Carto-VL animation controls not showing up on map - widget

Question

The sample Carto-VL animation control code doesn't appear on my animated map.
I'm creating an animation of tree population change since the last ice age in Carto VL, and I want the user to be able to change the duration and play/pause the animation. I've pasted the code from the example pages into my map.
const $progressRange = document.getElementById('js-progress-range');
const $playButton = document.getElementById('js-play-button');
const $pauseButton = document.getElementById('js-pause-button');
const $durationRange = document.getElementById('js-duration-range');
const $currentTime = document.getElementById('js-current-time');
// Listen to interaction events with the UI
$playButton.addEventListener('click', () => {
viz.variables.animation.play();
});
$pauseButton.addEventListener('click', () => {
viz.variables.animation.pause();
});
$durationRange.addEventListener('change', () => {
viz.variables.duration = parseInt($durationRange.value, 10);
});
// Update progress bar each 100 milliseconds
function updateProgress () {
$progressRange.value = viz.variables.animation.getProgressPct();
$currentTime.innerText = viz.variables.animation.getProgressValue();
}
setInterval(updateProgress, 100);
I expect the animation control box to show up on the map, but it only appears if there's an error in the code causing the map not to appear. Even then, I cannot interact with it.