fix: issue 534

Author: tblivet

modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl

@@ -177,7 +177,7 @@
             {elseif $facet.widgetType == 'slider'}
               {block name='facet_item_slider'}
                 {foreach from=$facet.filters item="filter"}
-                  <div class="accordion-body faceted-filter px-3 js-faceted-filter-slider">
+                  <div class="accordion-body faceted-filter px-0 js-faceted-filter-slider">
                     <div
                       class="faceted-slider js-faceted-slider-container"
                       data-slider-min="{$facet.properties.min}"
@@ -191,6 +191,7 @@
                       data-slider-direction="{$language.is_rtl}"
                   >
                     </div>
+                    <div class="js-faceted-values"></div>  
                   <input 
                     type="hidden"
                     class="form-range-start js-faceted-slider js-faceted-slider-start"

src/js/modules/facetedsearch/index.ts

@@ -15,6 +15,7 @@ export const initSliders = () => {
   // Get all slider configurations found in the DOM
   document.querySelectorAll(Theme.selectors.facetedsearch.filterSlider).forEach((filter: HTMLElement) => {
     const container = <target>filter.querySelector(Theme.selectors.facetedsearch.rangeContainer);
+    const facetedValues = document.querySelector('.js-faceted-values') as HTMLElement;
 
     // Init basic slider data
     let unitPosition = 'suffix';
@@ -88,9 +89,20 @@ export const initSliders = () => {
         },
       });
 
+      // Remove tooltips:
+      initiatedSlider.removeTooltips();
+
       initiatedSlider.on('set', (values, handle, unencoded, tap, positions, instance) => {
         filterHandler(values, instance);
       });
+
+      initiatedSlider.on('update', (values) => {
+        const formattedValues: string[] = values.map((value) => (
+          unitPosition === 'suffix' ? `${value}${unitSymbol}` : `${unitSymbol}${value}`),
+        );
+
+        facetedValues.innerHTML = formattedValues.join(' - ');
+      });
     } else {
       container.noUiSlider.updateOptions({
         start: sliderValues ?? [min, max],
@@ -101,9 +113,20 @@ export const initSliders = () => {
         },
       }, true);
 
+      // Remove tooltips:
+      container.noUiSlider.removeTooltips();
+
       container.noUiSlider.on('set', (values, handle, unencoded, tap, positions, instance) => {
         filterHandler(values, instance);
       });
+
+      container.noUiSlider.on('update', (values) => {
+        const formattedValues: string[] = values.map((value) => (
+          unitPosition === 'suffix' ? `${value}${unitSymbol}` : `${unitSymbol}${value}`),
+        );
+
+        facetedValues.innerHTML = formattedValues.join(' - ');
+      });
     }
   });
 };

src/scss/core/modules/_facetedsearch.scss

@@ -7,7 +7,7 @@ $component-name: search-filters;
   }
 
   .noUi-horizontal {
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
 
     .noUi-handle {
       display: flex;
@@ -17,6 +17,11 @@ $component-name: search-filters;
     }
   }
 
+  .js-faceted-values{
+    font-size: 0.875rem;
+    color: var(--bs-gray-600);
+  }
+
   .facet-dropdown {
     cursor: pointer;
   }