Add workaround for min price range

evershopcommerce · Dec 4, 2024 · 826ecd6 · 826ecd6
1 parent c7e2db7
commit 826ecd6
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git a/packages/evershop/src/components/frontStore/catalog/categoryView/filter/PriceFilter.jsx b/packages/evershop/src/components/frontStore/catalog/categoryView/filter/PriceFilter.jsx
@@ -3,6 +3,25 @@ import PropTypes from 'prop-types';
 import './PriceFilter.scss';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
 
+if (typeof document !== 'undefined')
+{
+  document.addEventListener('DOMContentLoaded', function () {
+    const input = document.querySelector('input.min');
+    const part = (input.value - input.min) / (input.max - input.min);
+    const div = input.nextElementSibling;
+    const x = part * (input.getBoundingClientRect().width - div.getBoundingClientRect().width);
+    div.style.left = x + 'px';
+  });
+}
+
+function minOnMouseOut (e) {
+  e.target.style.zIndex = 0;
+}
+
+function mindivOnMouseOver(e) {
+  e.target.previousSibling.style.zIndex = 2;
+}
+
 export function PriceFilter({
   priceRange: { min: minPrice, max: maxPrice },
   currentFilters,
@@ -113,6 +132,11 @@ export function PriceFilter({
     firstRender.current = false;
     const { value } = e.target;
     if (direction === 'min') {
+      const part = (e.target.value - e.target.min) / (e.target.max - e.target.min);
+      const div = e.target.nextElementSibling;
+      const x = part * (e.target.getBoundingClientRect().width - div.getBoundingClientRect().width);
+      div.style.left = x + 'px';
+
       if (value > to - 5) {
         setFrom(to - 5);
       } else {
@@ -149,6 +173,10 @@ export function PriceFilter({
           max={maxPrice}
           value={from}
           onChange={(e) => onChange(e, 'min')}
+          onMouseOut={(e) => minOnMouseOut(e)}
+        />
+        <div className="mindiv"
+           onMouseOver={(e) => mindivOnMouseOver(e)}
         />
         <div className="tooltip min">
           <div

diff --git a/packages/evershop/src/components/frontStore/catalog/categoryView/filter/PriceFilter.scss b/packages/evershop/src/components/frontStore/catalog/categoryView/filter/PriceFilter.scss
@@ -23,3 +23,20 @@
 .price-filter .filter-item-title {
   border-bottom: 0;
 }
+
+.min, .max {
+  &::-moz-range-track, &::-webkit-slider-runnable-track {
+    background: black;
+    height: 1px;
+  }
+}
+
+.mindiv {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  //border: 2px solid green;
+  box-sizing: border-box;
+  z-index: 1;
+  margin: 7px 1px;
+}