[NOCI] Add touch events to range slider (#176)

* Add touch events to range slider

* add test

Author: Mudaafi

spec/components/Filters/Filters.test.jsx

@@ -419,5 +419,23 @@ describe('Testing Component: Filters', () => {
       const updatedFiltersWithMaxSliderMove = getRequestFilters(container);
       expect(updatedFiltersWithMaxSliderMove.price[0].indexOf('70')).not.toBe(-1);
     });
+
+    it('SliderRange: Using Touch Events - Upon moving the slider buttons, requestFilters should be updated', async () => {
+      const { container } = render(<TestFiltersApplied />);
+      const cioMinSlider = container.querySelector('.cio-min-slider');
+      const cioMaxSlider = container.querySelector('.cio-max-slider');
+
+      fireEvent.change(cioMinSlider, { target: { value: 20 } });
+      fireEvent.touchEnd(cioMinSlider);
+
+      const updatedFiltersWithMinSliderMove = getRequestFilters(container);
+      expect(updatedFiltersWithMinSliderMove.price[0].indexOf('20')).not.toBe(-1);
+
+      fireEvent.change(cioMaxSlider, { target: { value: 70 } });
+      fireEvent.touchEnd(cioMaxSlider);
+
+      const updatedFiltersWithMaxSliderMove = getRequestFilters(container);
+      expect(updatedFiltersWithMaxSliderMove.price[0].indexOf('70')).not.toBe(-1);
+    });
   });
 });

src/components/Filters/FilterRangeSlider.tsx

@@ -200,6 +200,7 @@ export default function FilterRangeSlider(props: FilterRangeSliderProps) {
               value={minValue}
               onChange={onMinSliderMove}
               onMouseUp={onSliderMoveEnd}
+              onTouchEnd={onSliderMoveEnd}
             />
             <input
               className='cio-max-slider'
@@ -210,6 +211,7 @@ export default function FilterRangeSlider(props: FilterRangeSliderProps) {
               value={maxValue}
               onChange={onMaxSliderMove}
               onMouseUp={onSliderMoveEnd}
+              onTouchEnd={onSliderMoveEnd}
             />
           </div>
         </div>