olivesnews/js/nouislider-year-format.js

(function (Drupal) {
  "use strict";

  Drupal.behaviors.nouisliderYearFormat = {
    attach: function (context, settings) {
      // Target the slider directly by its rendered ID.
      // Your facet renders the slider as <div id="year" class="facet-slider noUi-target">
      const sliderEl = context.querySelector("#year.noUi-target");

      if (!sliderEl || !sliderEl.noUiSlider) return;

      const integerFormat = {
        to: function (value) {
          return String(Math.round(value));
        },
        from: function (value) {
          return Math.round(Number(value));
        },
      };

      // Override format and tooltips together
      sliderEl.noUiSlider.updateOptions({
        format: integerFormat,
        tooltips: [integerFormat, integerFormat],
      });

      // Also fix the input fields — they get their initial value from the slider's
      // 'update' event, but that fires before our override. Re-trigger manually:
      const inputFrom = document.getElementById("nouislider-input-from");
      const inputTo = document.getElementById("nouislider-input-to");

      if (inputFrom && inputTo) {
        const values = sliderEl.noUiSlider.get();
        inputFrom.value = Math.round(Number(values[0]));
        inputTo.value = Math.round(Number(values[1]));

        // Keep inputs in sync going forward
        sliderEl.noUiSlider.on("update", function (values) {
          inputFrom.value = Math.round(Number(values[0]));
          inputTo.value = Math.round(Number(values[1]));
        });
      }
    },
  };
})(Drupal);