From 81e820452d6a7685c1b47ec16a59d20b8e077575 Mon Sep 17 00:00:00 2001
From: tblivet <thibault.blivet@prestashop.com>
Date: Tue, 8 Aug 2023 16:55:28 +0200
Subject: [PATCH] fix: issue 534

---
 .../views/templates/front/catalog/facets.tpl  |  3 ++-
 src/js/modules/facetedsearch/index.ts         | 23 +++++++++++++++++++
 src/scss/core/modules/_facetedsearch.scss     |  7 +++++-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl b/modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl
index ce40c32bc..8777152cf 100644
--- a/modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl
+++ b/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"
diff --git a/src/js/modules/facetedsearch/index.ts b/src/js/modules/facetedsearch/index.ts
index ab303e34e..4f13c46ed 100644
--- a/src/js/modules/facetedsearch/index.ts
+++ b/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(' - ');
+      });
     }
   });
 };
diff --git a/src/scss/core/modules/_facetedsearch.scss b/src/scss/core/modules/_facetedsearch.scss
index b77192f0b..dc0393a11 100644
--- a/src/scss/core/modules/_facetedsearch.scss
+++ b/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;
   }