Use the Attributes range slider value for custom calculations

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.


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.

  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);
      } else if (mutation.type === 'attributes') {
        console.log(`The ${mutation.attributeName} attribute was modified.`);

  const observer = new MutationObserver(callback);
  observer.observe(rangeSliderContainer, config);
1 Like

This worked a treat! Thank you.

1 Like