Use the Attributes range slider value for custom calculations

General
1

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

live: https://fs-range-slider-custom.webflow.io/

2

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.

<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>
1 Like
3

This worked a treat! Thank you.

1 Like