.

components/listing/ListingFilter.js

@@ -12,6 +12,8 @@ const format = "HH:mm";
 const suitableAgeGroups = [2, 5, 8, 10, 12, 14, 16];
 const ListingFilter = () => {
   const [showContent, setShowContent] = useState(false);
+  const [sliderLowerValue, setsliderLowerValue] = useState(0);
+  const [sliderUpperValue, setsliderUpperValue] = useState(5000);
   const dispatch = useDispatch();
   const { activityFilters } = useSelector(sate => sate.activityFilters);
   const { subCategories, loading } = useSelector(sate => sate.subCategories);
@@ -31,7 +33,9 @@ const ListingFilter = () => {
               <a
                 onClick={e => {
                   e.preventDefault();
-                  dispatch(setActivityFilters({ filters: {} }));
+                  dispatch(setActivityFilters({ filters: { priceLowerLimit: 0, priceUpperLimit: 5000 } }));
+                  setsliderLowerValue(0);
+                  setsliderUpperValue(5000);
                 }}
               >
                 Reset
@@ -48,7 +52,8 @@ const ListingFilter = () => {
           </div>
           <div className="inner">
             <div className="price">
-              $0 - 1000 <span className="sub-text"></span>
+              ${activityFilters.priceLowerLimit ? activityFilters.priceLowerLimit : 0} - ${activityFilters.priceUpperLimit ? activityFilters.priceUpperLimit : 5000}{" "}
+              <span className="sub-text"></span>
             </div>
             <div className="graph">
               <Slider
@@ -57,22 +62,30 @@ const ListingFilter = () => {
                 }}
                 step={10}
                 onChange={e => {
-                  // console.log(e);
+                  setsliderLowerValue(e[0]);
+                  setsliderUpperValue(e[1]);
+                }}
+                onChangeComplete={e => {
+                  console.log(e);
                   dispatch(setActivityFilters({ filters: { ...activityFilters, priceLowerLimit: e[0], priceUpperLimit: e[1] } }));
                   // setTimeout(() => {
                   // }, 1000);
                 }}
-                defaultValue={[0, 1000]}
+                defaultValue={[
+                  activityFilters.priceLowerLimit ? activityFilters.priceLowerLimit : 0,
+                  activityFilters.priceUpperLimit ? activityFilters.priceUpperLimit : 5000
+                ]}
+                value={[sliderLowerValue, sliderUpperValue]}
                 // min={0}
-                max={1000}
+                max={5000}
                 tooltip={{
                   open: true
                 }}
               />
-              <div className="graph-price">
-                <div className="min">$0</div>
-                <div className="min">$1000</div>
-              </div>
+              {/* <div className="graph-price">
+                <div className="min"> ${activityFilters.priceLowerLimit ? activityFilters.priceLowerLimit : 0}</div>
+                <div className="min">${activityFilters.priceUpperLimit ? activityFilters.priceUpperLimit : 5000}</div>
+              </div> */}
               {/* <img className="img-fluid w-100" src="/images/buget.svg" /> */}
             </div>
           </div>

components/listing/ListingInner.js

@@ -93,6 +93,9 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
     if (activityFilters.priceUpperLimit) {
       filters["priceUpperLimit"] = activityFilters.priceUpperLimit;
     }
+    if (activityFilters.priceLowerLimit) {
+      filters["priceLowerLimit"] = activityFilters.priceLowerLimit;
+    }
     console.log("router query", filters.category);
     dispatch(
       getActivitiesByFilters({
@@ -108,6 +111,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
         ageLowerLimit: filters.ageLowerLimit,
         sort: filters.sort,
         priceUpperLimit: filters.priceUpperLimit,
+        priceLowerLimit: filters.priceLowerLimit,
         currentPage: router.query.page
       })
     );

redux/actions/activityAction.js

@@ -498,6 +498,9 @@ export const getActivitiesByFilters =
       if (priceUpperLimit) {
         query.filters["pricePerPerson"] = { $lte: priceUpperLimit };
       }
+      if (priceUpperLimit) {
+        query.filters["pricePerPerson"] = { $gte: priceLowerLimit };
+      }
       // console.log("subcategoryquery:", query);
 
       const queryString = qs.stringify(query, {

redux/reducers/activitiesReducer.js

@@ -130,7 +130,7 @@ export const updateActivityByIdReducer = (state = {}, action) => {
   }
 };
 
-export const setActivityFilterReducer = (state = { activityFilters: {} }, action) => {
+export const setActivityFilterReducer = (state = { activityFilters: {priceLowerLimit: 0, priceUpperLimit: 5000} }, action) => {
   switch (action.type) {
     case ACTIVITY_FILTERS_CONSTANT:
       return {