Uncaught Error: noUiSlider: Slider was already initialized - when using multiple 'Range NoUiSliders' on the same Search API view

Created on 21 March 2025, about 1 month ago

Problem/Motivation

When using multiple 'Range NoUiSliders' within the same Search API view, an error occurs in the browser console:

Uncaught Error: noUiSlider: Slider was already initialized.

This indicates that the NoUiSlider library is being initialized multiple times on the same element, likely due to the way Drupal attaches behaviors to dynamically loaded content. Additionally, PHP warnings related to undefined array keys appear in the logs:

Undefined array key "tooltips" in NoUiSliderWidget->buildConfigurationForm() (line 96)
Undefined array key "pips_values" in NoUiSliderWidget->buildConfigurationForm() (line 121)
Undefined array key "pips_density" in NoUiSliderWidget->buildConfigurationForm() (line 129)
Undefined array key "from" in NoUiSliderWidget->buildConfigurationForm() (line 151)

Steps to reproduce

Install and enable the facets_range_nouislider module.
Install and enable the patch 📌 Automated Drupal 11 compatibility fixes for facets_range_nouislider Needs review for Drupal 11 compatibility.
Configure a Search API view with a Facet using the NoUiSlider widget.
Add multiple instances of the same facet on the page.
Perform a facet filtering action or reload the page.
Observe the browser console and Drupal logs for errors and warnings.

Proposed resolution

Ensure that NoUiSlider instances are only initialized once per element.
Modify the JavaScript behavior in slider.js to check if an instance already exists before creating a new one.
Validate and initialize missing configuration options (tooltips, pips_values, etc.) to prevent undefined array key warnings in NoUiSliderWidget->buildConfigurationForm().
Consider debugging how behaviors are re-attached on AJAX responses to prevent duplicate initialization.