Slider increments match with text box

Ask the Community Customization
1

I have my calculator using a slider for quantity and have it set for increments of 100. However, a user can type anything into the text box (not in an increment of 100 or within the scale) and then it doesn’t calculate the costs correctly.

So, it’d be cool if the text box was either not editable or will only allow the same increments set for the slider.

Does that make sense?

1 Like
3

Hi there, @Lacie_Lindstaedt :wave:

We’ve added this code to the Custom JS field on the Settings tab of your widget’s settings to block the opportunity to add values to the text box:

(function() {
  function waitForElement(selector, root = document) {
    return new Promise((res) => {
      let i = 0;

      function check() {
        const component = root.querySelector(selector);

        if (component) {
          res(component);
        } else if (i !== 50) {
          setTimeout(check, 100);
          i++;
        }
      }

      check();
    });
  }

  waitForElement("[class*='slider__Container-sc'] input")
    .then(() => {
      const sliders = document.querySelectorAll("[class*='slider__Container-sc'] input");
      sliders.forEach((slider) => {
        slider.disabled = 'true';
      });
    });
})();

Note: Custom JS operates only upon widget installation. So, you’ll see the changes on the website where the widget is installed, but not in the configurator


Check it out and let me know if you like the result :slightly_smiling_face: