# Use the Attributes range slider value for custom calculations

**URL:** <https://forum.finsweet.com/t/use-the-attributes-range-slider-value-for-custom-calculations/2231>\
**Category:** General\
**Created:** [December 4, 2023, 9:41am UTC](https://forum.finsweet.com/t/use-the-attributes-range-slider-value-for-custom-calculations/2231 "2023-12-04T09:41:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Scott\_Humphrey](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/scott_humphrey/32/593_2.png) [@Scott\_Humphrey](https://forum.finsweet.com/u/Scott_Humphrey)\
**Post date:** [December 4, 2023, 9:41am UTC](https://forum.finsweet.com/t/use-the-attributes-range-slider-value-for-custom-calculations/2231/1 "2023-12-04T09:41:12Z")

</div>

I’m trying to expand on the FS range slider Attribute and populate some calculations based on the slider value.

I can’t seem to get the value from the slider, once I have that I can use it for the calculations I need. Here’s the preview if you can help.

I am simply trying to see that value in the console to start with. I’ve been using ChatGPT to help but not getting the results I need.

[https://preview.webflow.com/preview/fs-range-slider-custom?utm\_medium=preview\_link&utm\_source=designer&utm\_content=fs-range-slider-custom&preview=678328cd2e654f1230a4b26beb8b7da0&workflow=preview](https://preview.webflow.com/preview/fs-range-slider-custom?utm_medium=preview_link&utm_source=designer&utm_content=fs-range-slider-custom&preview=678328cd2e654f1230a4b26beb8b7da0&workflow=preview)

live: [https://fs-range-slider-custom.webflow.io/](https://fs-range-slider-custom.webflow.io/)

---

<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:** [December 4, 2023, 12:50pm UTC](https://forum.finsweet.com/t/use-the-attributes-range-slider-value-for-custom-calculations/2231/2 "2023-12-04T12:50:26Z")

</div>

Hey @Scott_Humphrey! Instead of using an Event Listener, you can try a Mutation Observer.

Here is a sample code that retrieves the value displayed and logs it to the console.

```js
<script>
  const rangeSliderContainer = document.getElementById('headcount');
  const resultElement = document.querySelector('.calc-value-one');

  const config = { attributes: true, childList: true, subtree: true };

  const extractNumericValue = (element) => {
    const headcountValue = element.textContent.trim().replace(/,/g, '');
    const numericValue = parseInt(headcountValue, 10);

    // Check for NaN or undefined
    return isNaN(numericValue) ? 0 : numericValue;
  };

  const callback = (mutationList, observer) => {
    for (const mutation of mutationList) {
      if (mutation.type === 'childList') {
        const headcountElement = document.getElementById('headcount');
        const numericValue = extractNumericValue(headcountElement);
        console.log(numericValue);
      } else if (mutation.type === 'attributes') {
        console.log(`The ${mutation.attributeName} attribute was modified.`);
      }
    }
  };

  const observer = new MutationObserver(callback);
  observer.observe(rangeSliderContainer, config);
</script>

```

---

<div class="post-metadata">

**Author:** ![Scott\_Humphrey](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/scott_humphrey/32/593_2.png) [@Scott\_Humphrey](https://forum.finsweet.com/u/Scott_Humphrey)\
**Post date:** [December 5, 2023, 6:44pm UTC](https://forum.finsweet.com/t/use-the-attributes-range-slider-value-for-custom-calculations/2231/3 "2023-12-05T18:44:06Z")

</div>

This worked a treat! Thank you.