# Dynamically change values for filtering

**URL:** <https://forum.finsweet.com/t/dynamically-change-values-for-filtering/5167>\
**Category:** Attributes\
**Tags:** cmsfilter, cmsload, attributes-api, attributes-v2\
**Created:** [June 19, 2025, 9:05pm UTC](https://forum.finsweet.com/t/dynamically-change-values-for-filtering/5167 "2025-06-19T21:05:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![stanimish](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/stanimish/32/4507_2.png) [@stanimish](https://forum.finsweet.com/u/stanimish)\
**Post date:** [June 19, 2025, 9:05pm UTC](https://forum.finsweet.com/t/dynamically-change-values-for-filtering/5167/1 "2025-06-19T21:05:58Z")

</div>

I use Attributes V2, List Filter, List Load and Range Slider. There are a base price and a weekly price that is used for filter. The weekly price is calculated based on selected inputs and can be changed. I used range slider to filter by price. The issue that i’m not able to make it work - sometimes it works, sometimes it doesn’t. My idea is to use API to recalculate the weekly price and update the object.

```auto
window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push(
  'list',
  (listInstances) => {
    carsList = listInstances[0];
    
    carsList.effect(() => {
      console.log('effect triggered');
      console.log('carsList:');
      console.log(carsList)
      //calculatePrices();
      
      recalculatePrices();
      
      const makeFilters = carsList.allFieldsData.value.make.rawValues;
      const modelFilters = carsList.allFieldsData.value.model.rawValues;
      hideEmptyFilters(makeFilters, 'make');
      hideEmptyFilters(modelFilters, 'model');
      //console.log('Total items:', carsList.items.value.length);
    });  
    carsList.addHook('start', (items) => {
      console.log('start hook');
      console.log('items:');
      console.log(items);
      initRangeSliders(priceValues, 25);
    });
    carsList.addHook('filter', (items) => {
      console.log('filter hook');
    });
    carsList.addHook('afterRender', (items) => {
      console.log('afterRender hook');
      console.log(items);
      items.forEach((e) => {
        const $price = e.element.querySelector('[data-price]');
        const basePrice = parseInt($price.dataset.price);
        $price.textContent = calculateWeeklyPrice(basePrice, irr, weeksInYear, duration);
      });
    }); 
  },
]);

function recalculatePrices() {
    priceValues = new Set();
    carsList.items.value.forEach((e) => {
      const basePrice = e.fields['base-price'].value;
      const weeklyPrice = calculateWeeklyPrice(basePrice, irr, weeksInYear, duration);
      e.fields.price.rawValue[0] = weeklyPrice.toString();
      e.fields.price.value[0] = weeklyPrice;
      e.fieldElements.price[0].originalHTML = weeklyPrice.toString();
      e.fieldElements.price[0].value = weeklyPrice;
      priceValues.add(weeklyPrice);
    });
    console.log("priceValues:");
    console.log(priceValues);
    carsList.items.value = [...carsList.items.value];
}

```

Please see the page here:

> **[New Cars for Uber & PCO Hire in the UK | Ayanuk](https://ayanuk.webflow.io/new-cars)**
>
> Browse our catalogue of brand new cars for Uber and PCO hire. High-quality, fully insured vehicles with flexible rental terms across the UK.

Please use the filter there to test:

 ![Screenshot 2025-06-20 at 00.08.25](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/c/c1808081d082166d9b50eef530dc00c76425f48e.jpeg)

---

<div class="post-metadata">

**Author:** ![stanimish](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/stanimish/32/4507_2.png) [@stanimish](https://forum.finsweet.com/u/stanimish)\
**Post date:** [June 22, 2025, 10:40pm UTC](https://forum.finsweet.com/t/dynamically-change-values-for-filtering/5167/2 "2025-06-22T22:40:20Z")

</div>

So basically, my question is: how to dynamically change values to filter, so the filter takes new values into account?

I’ll highly appreciate any help, really need this task done as soon as possible.

---

<div class="post-metadata">

**Author:** ![stanimish](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/stanimish/32/4507_2.png) [@stanimish](https://forum.finsweet.com/u/stanimish)\
**Post date:** [June 22, 2025, 10:50pm UTC](https://forum.finsweet.com/t/dynamically-change-values-for-filtering/5167/3 "2025-06-22T22:50:09Z")

</div>

My idea is to do this:

```auto
carsList.items.value.forEach((e) => {
      const basePrice = e.fields['base-price'].value;
      const weeklyPrice = calculateWeeklyPrice(basePrice, irr, weeksInYear, duration);

/* 1. I update these fields of The List object. It seem to work sometime, but sometime it doesn't */
      e.fields.price.rawValue[0] = weeklyPrice.toString();
      e.fields.price.value[0] = weeklyPrice;
      e.fieldElements.price[0].originalHTML = weeklyPrice.toString();
      e.fieldElements.price[0].value = weeklyPrice;
    });

/* 2. I update the items to trigger reactiveness */
carsList.items.value = [...carsList.items.value];

```

The filter input is inside of a range slider that is hidden by default. But I do:

```auto
window.FinsweetAttributes.modules.rangeslider.restart()

```

when it’s gets displayed.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [June 25, 2025, 7:13pm UTC](https://forum.finsweet.com/t/dynamically-change-values-for-filtering/5167/4 "2025-06-25T19:13:01Z")

</div>

Hey @stanimish! I’ve replied by DM!