How would one format the labels of a time slider to only show the "year"?

Question

How would one format the labels of time slider to only show the "year" from my date column? Particularly the "extent" object (see the red circles). I am able to change the "min" and "max" without much trouble using a lableFormatFunction but I cannot get the extent to change while retaining it's ability to dynamically update when adjusting the slider. Thank you!

kenbuja · Accepted Answer

This labelFormatFunction returns the years in the extent (shown using this sample, with a few alterations)

labelFormatFunction: (value, type, element, layout) => {
  const options = {year: 'numeric'}
  const normal = new Intl.DateTimeFormat("en-us", options);
  switch (type) {
    case "min":
      element.setAttribute("style", "color: #ff642e;");
      element.innerText = normal.format(value);
      break;
    case "max":
      element.setAttribute("style", "color: #ff642e;");
      element.innerText = normal.format(value);
      break;
    case "extent":
      const start = timeSlider.fullTimeExtent.start;
      const year0 = value[0].getFullYear();
      const year1 = value[1].getFullYear()
      element.innerText = `${year0} - ${year1}`;
      break;
  }
}