diff --git a/_dev/js/listing/components/filters/Filters.js b/_dev/js/listing/components/filters/Filters.js
index d65b8b59..2178b3a4 100644
--- a/_dev/js/listing/components/filters/Filters.js
+++ b/_dev/js/listing/components/filters/Filters.js
@@ -1,16 +1,18 @@
 import prestashop from 'prestashop';
-import $ from 'jquery';
-import FiltersRangeSliders from '@js/listing/components/filters/FiltersRangeSliders';
+import FiltersRangeSliders from './FiltersRangeSliders';
+import useEvent from '../../../theme/components/event/useEvent';
 
 class Filters {
   constructor() {
-    this.$body = $('body');
+    this.body = document.querySelector('body');
     this.setEvents();
     this.rangeSliders = FiltersRangeSliders;
     this.rangeSliders.init();
   }
 
   setEvents() {
+    const { on } = useEvent();
+
     prestashop.on('updatedProductList', () => {
       prestashop.pageLoader.hideLoader();
       this.rangeSliders.init();
@@ -20,34 +22,36 @@ class Filters {
       prestashop.pageLoader.showLoader();
     });
 
-    this.$body.on('click', '.js-search-link', (event) => {
+    on(this.body, 'click', '.js-search-link', (event) => {
       event.preventDefault();
-      prestashop.emit('updateFacets', $(event.target).closest('a').get(0).href);
+      prestashop.emit('updateFacets', event.target.closest('a').href);
     });
 
-    this.$body.on('change', '[data-action="search-select"]', ({ target }) => {
-      prestashop.emit('updateFacets', $(target).find('option:selected').data('href'));
+    on(this.body, 'change', '[data-action="search-select"]', ({ target }) => {
+      const selectedElement = target.options[target.selectedIndex];
+
+      prestashop.emit('updateFacets', selectedElement.dataset.href);
     });
 
-    this.$body.on('click', '.js-search-filters-clear-all', (event) => {
+    on(this.body, 'click', '.js-search-filters-clear-all', (event) => {
       prestashop.emit('updateFacets', this.constructor.parseSearchUrl(event));
     });
 
-    this.$body.on('change', '#search_filters input[data-search-url]', (event) => {
+    on(this.body, 'change', '#search_filters input[data-search-url]', (event) => {
       prestashop.emit('updateFacets', this.constructor.parseSearchUrl(event));
     });
   }
 
-  static parseSearchUrl(event) {
-    if (event.target.dataset.searchUrl !== undefined) {
-      return event.target.dataset.searchUrl;
+  static parseSearchUrl({ target }) {
+    if (target.dataset.searchUrl !== undefined) {
+      return target.dataset.searchUrl;
     }
 
-    if ($(event.target).parent()[0].dataset.searchUrl === undefined) {
+    if (target.parent.dataset.searchUrl === undefined) {
       throw new Error('Can not parse search URL');
     }
 
-    return $(event.target).parent()[0].dataset.searchUrl;
+    return target.parent.dataset.searchUrl;
   }
 }
 
diff --git a/_dev/js/listing/components/filters/FiltersRangeSliders.js b/_dev/js/listing/components/filters/FiltersRangeSliders.js
index 61a1ed94..bee2e052 100644
--- a/_dev/js/listing/components/filters/FiltersRangeSliders.js
+++ b/_dev/js/listing/components/filters/FiltersRangeSliders.js
@@ -1,13 +1,12 @@
-import $ from 'jquery';
-import RangeSlider from '@js/listing/components/filters/RangeSlider';
+import RangeSlider from './RangeSlider';
+import { each } from '../../../theme/utils/DOMHelpers';
 
 class FiltersRangeSliders {
   static init() {
-    const $rangeSliders = $('.js-range-slider');
+    each('.js-range-slider', (slider) => {
+      const rangeSlider = new RangeSlider(slider);
 
-    $rangeSliders.each((i, el) => {
-      /* eslint no-unused-vars: ["error", { "varsIgnorePattern": "slider" }] */
-      const slider = new RangeSlider(el);
+      rangeSlider.init();
     });
   }
 }
diff --git a/_dev/js/listing/components/filters/RangeSlider.js b/_dev/js/listing/components/filters/RangeSlider.js
index e94afcc4..5eae465a 100644
--- a/_dev/js/listing/components/filters/RangeSlider.js
+++ b/_dev/js/listing/components/filters/RangeSlider.js
@@ -1,12 +1,19 @@
-import $ from 'jquery';
 import prestashop from 'prestashop';
 import noUiSlider from 'nouislider';
 import wNumb from 'wnumb';
-import FiltersUrlHandler from '@js/listing/components/filters/FiltersUrlHandler';
+import FiltersUrlHandler from './FiltersUrlHandler';
+import useEvent from '../../../theme/components/event/useEvent';
 
 class RangeSlider {
   constructor(element) {
-    this.$slider = $(element);
+    this.slider = element;
+  }
+
+  init() {
+    // If slider already initialized, do nothing
+    if (typeof this.slider.noUiSlider !== 'undefined') {
+      return;
+    }
 
     this.setConfig();
     this.setFormat();
@@ -17,14 +24,17 @@ class RangeSlider {
   }
 
   getSliderType() {
-    this.sliderType = this.$slider.data('slider-specifications') ? 'price' : 'weight';
+    this.sliderType = this.slider.dataset.sliderSpecifications ? 'price' : 'weight';
   }
 
   setConfig() {
-    this.min = this.$slider.data('slider-min');
-    this.max = this.$slider.data('slider-max');
-    this.$parentContainer = this.$slider.closest('.js-input-range-slider-container');
-    this.$inputs = [this.$parentContainer.find('[data-action="range-from"]'), this.$parentContainer.find('[data-action="range-to"]')];
+    this.min = Number.parseFloat(this.slider.dataset.sliderMin);
+    this.max = Number.parseFloat(this.slider.dataset.sliderMax);
+    this.parentContainer = this.slider.closest('.js-input-range-slider-container');
+    this.inputs = [
+      this.parentContainer.querySelector('[data-action="range-from"]'),
+      this.parentContainer.querySelector('[data-action="range-to"]'),
+    ];
 
     this.getSliderType();
 
@@ -32,17 +42,15 @@ class RangeSlider {
       const {
         currencySymbol,
         positivePattern,
-      } = this.$slider.data('slider-specifications');
+      } = JSON.parse(this.slider.dataset.sliderSpecifications);
 
       this.sign = currencySymbol;
       this.positivePattern = positivePattern;
-      this.values = this.$slider.data('slider-values');
+      this.values = JSON.parse(this.slider.dataset.sliderValues);
       this.signPosition = this.positivePattern.indexOf('¤') === 0 ? 'prefix' : 'suffix';
     } else if (this.sliderType === 'weight') {
-      const unit = this.$slider.data('slider-unit');
-
-      this.sign = unit;
-      this.values = this.$slider.data('slider-values');
+      this.sign = this.slider.dataset.sliderUnit;
+      this.values = JSON.parse(this.slider.dataset.sliderValues);
       this.signPosition = 'suffix';
     }
 
@@ -62,7 +70,7 @@ class RangeSlider {
   }
 
   initFilersSlider() {
-    this.sliderHandler = noUiSlider.create(this.$slider.get(0), {
+    this.sliderHandler = noUiSlider.create(this.slider, {
       start: this.values,
       connect: [false, true, false],
       range: {
@@ -78,49 +86,50 @@ class RangeSlider {
   }
 
   setInputValues(values, formatValue = false) {
-    this.$inputs.forEach((input, i) => {
-      const val = formatValue ? this.format.from(values[i]) : values[i];
-      $(input).val(val);
+    this.inputs.forEach((input, i) => {
+      input.value = formatValue ? this.format.from(values[i]) : values[i];
     });
   }
 
   setEvents() {
+    const { on, off } = useEvent();
     this.sliderHandler.off('set', this.constructor.handlerSliderSet);
     this.sliderHandler.on('set', this.constructor.handlerSliderSet);
     this.sliderHandler.off('update', this.handlerSliderUpdate);
     this.sliderHandler.on('update', this.handlerSliderUpdate);
 
-    this.$inputs.forEach(($input) => {
-      $input.off('focus', this.handleInputFocus);
-      $input.on('focus', this.handleInputFocus);
-      $input.off('blur', this.handleInputBlur);
-      $input.on('blur', this.handleInputBlur);
-      $input.on('keyup', this.handleInputKeyup);
+    this.inputs.forEach((input) => {
+      off(input, 'keyup', this.handleInputKeyup);
+      on(input, 'keyup', this.handleInputKeyup);
+
+      off(input, 'focus', this.handleInputFocus);
+      on(input, 'focus', this.handleInputFocus);
+
+      off(input, 'blur', this.handleInputBlur);
+      on(input, 'blur', this.handleInputBlur);
     });
   }
 
-  static getInputAction($input) {
-    return $input.data('action');
+  static getInputAction(input) {
+    return input.dataset.action;
   }
 
-  getInputPositionInValue($input) {
+  getInputPositionInValue(input) {
     const actionPosition = {
       'range-from': 0,
       'range-to': 1,
     };
 
-    return actionPosition[this.constructor.getInputAction($input)];
+    return actionPosition[this.constructor.getInputAction(input)];
   }
 
-  handleInputFocus = ({ target }) => {
-    const $input = $(target);
-    $input.val(this.format.from($input.val()));
+  handleInputFocus = ({ target: input }) => {
+    input.value = this.format.from(input.value);
   };
 
-  handleInputBlur = ({ target }) => {
-    const $input = $(target);
-    const value = $input.val();
-    const position = this.getInputPositionInValue($input);
+  handleInputBlur = ({ target: input }) => {
+    const { value } = input;
+    const position = this.getInputPositionInValue(input);
     const oldValues = this.values;
     const newValues = [...oldValues];
     newValues[position] = value;
@@ -128,17 +137,17 @@ class RangeSlider {
     if (value !== oldValues[position]) {
       this.sliderHandler.set(newValues);
     } else {
-      $input.val(this.format.to(parseFloat($input.val(), 10)));
+      input.value = this.format.to(Number.parseFloat(input.value));
     }
   };
 
-  handleInputKeyup = ({ target, keyCode }) => {
+  handleInputKeyup = ({ target: input, keyCode }) => {
     if (keyCode !== 13) {
       return;
     }
-    const $input = $(target);
-    const value = $input.val();
-    const position = this.getInputPositionInValue($input);
+
+    const { value } = input;
+    const position = this.getInputPositionInValue(input);
     const oldValues = this.values;
     const newValues = [...oldValues];
     newValues[position] = value;
@@ -146,7 +155,7 @@ class RangeSlider {
     if (value !== oldValues[position]) {
       this.sliderHandler.set(newValues);
     } else {
-      $input.val(this.format.to(parseFloat($input.val(), 10)));
+      input.value = this.format.to(Number.parseFloat(input.value));
     }
   };
 
@@ -165,9 +174,9 @@ class RangeSlider {
     noUiSliderInstance,
   ) {
     const formatFunction = noUiSliderInstance.options.format;
-    const $target = $(noUiSliderInstance.target);
-    const group = $target.data('slider-label');
-    const unit = $target.data('slider-unit');
+    const { target } = noUiSliderInstance;
+    const group = target.dataset.sliderLabel;
+    const unit = target.dataset.sliderUnit;
     const [from, to] = values.map((val) => formatFunction.from(val));
 
     const filtersHandler = new FiltersUrlHandler();