fix(#1323391): [Example App] Price slider blinking and add range value

Author: matthias-goupil

front/example-app/src/components/Facets/FacetSlider.tsx

@@ -4,6 +4,7 @@ import { IGraphqlAggregation } from '@elastic-suite/gally-admin-shared'
 import { IFilterChange } from '../../types'
 
 import { Container } from './Facet.styled'
+import { useState } from 'react'
 
 interface IProps {
   activeOptions: string[]
@@ -16,20 +17,24 @@ function FacetSlider(props: IProps): JSX.Element {
   const { activeOptions, filter, id, onChange } = props
   const min = Number(filter.options.at(0).value)
   const max = Number(filter.options.at(-1).value)
+  const [value, setValue] = useState<number[]>([min, max])
+
   const marks = [
     {
       value: min,
       label: min,
     },
   ]
+
   if (min !== max) {
     marks.push({
       value: max,
       label: max,
     })
   }
-  function handleChange(_: Event, value: number | number[]): void {
-    onChange(filter, String(value))()
+
+  function handleChange(_: Event, value: number[]): void {
+    onChange(filter, value.join(' - '))()
   }
 
   return (
@@ -39,8 +44,9 @@ function FacetSlider(props: IProps): JSX.Element {
         marks={marks}
         max={max}
         min={min}
-        onChange={handleChange}
-        value={Number(activeOptions[0] ?? max)}
+        onChange={(_e, v: number[]): void => setValue(v)}
+        onChangeCommitted={(e): void => handleChange(e as Event, value)}
+        value={activeOptions[0] ? value : [min, max]}
         valueLabelDisplay="auto"
       />
     </Container>

front/example-app/src/services/product.ts

@@ -32,8 +32,10 @@ export function getProductFilters(
           eq: true,
         } as IStockTypeDefaultFilterInputType
       } else if (activeFilter.filter.type === AggregationType.SLIDER) {
+        const [min, max] = activeFilter.value.split(' - ')
         acc[activeFilter.filter.field as keyof IProductFieldFilterInput] = {
-          lte: Number(activeFilter.value),
+          lte: Number(max),
+          gte: Number(min),
         } as IEntityIntegerTypeFilterInput
       } else if (
         activeFilter.filter.type === AggregationType.CHECKBOX ||