diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts index d95babf15..fe09c4ab6 100644 --- a/src/js/constants/selectors-map.ts +++ b/src/js/constants/selectors-map.ts @@ -6,6 +6,7 @@ export const facetedsearch = { range: '.js-faceted-slider', rangeContainer: '.js-faceted-slider-container', + rangeValues: '.js-faceted-values', filterSlider: '.js-faceted-filter-slider', offCanvasFaceted: '#offcanvas-faceted', }; diff --git a/src/js/modules/facetedsearch/index.ts b/src/js/modules/facetedsearch/index.ts index 4f13c46ed..15baa8817 100644 --- a/src/js/modules/facetedsearch/index.ts +++ b/src/js/modules/facetedsearch/index.ts @@ -15,7 +15,6 @@ export const initSliders = () => { // Get all slider configurations found in the DOM document.querySelectorAll(Theme.selectors.facetedsearch.filterSlider).forEach((filter: HTMLElement) => { const container = filter.querySelector(Theme.selectors.facetedsearch.rangeContainer); - const facetedValues = document.querySelector('.js-faceted-values') as HTMLElement; // Init basic slider data let unitPosition = 'suffix'; @@ -101,7 +100,9 @@ export const initSliders = () => { unitPosition === 'suffix' ? `${value}${unitSymbol}` : `${unitSymbol}${value}`), ); - facetedValues.innerHTML = formattedValues.join(' - '); + const parentFacet = initiatedSlider.target.closest(Theme.selectors.facetedsearch.filterSlider) as HTMLElement; + const showValues = parentFacet.querySelector(Theme.selectors.facetedsearch.rangeValues) as HTMLElement; + showValues.innerHTML = formattedValues.join(' - '); }); } else { container.noUiSlider.updateOptions({ @@ -125,7 +126,9 @@ export const initSliders = () => { unitPosition === 'suffix' ? `${value}${unitSymbol}` : `${unitSymbol}${value}`), ); - facetedValues.innerHTML = formattedValues.join(' - '); + const parentFacet = initiatedSlider.target.closest(Theme.selectors.facetedsearch.filterSlider) as HTMLElement; + const showValues = parentFacet.querySelector(Theme.selectors.facetedsearch.rangeValues) as HTMLElement; + showValues.innerHTML = formattedValues.join(' - '); }); } });