How can I create a range slider add to cart feature in Webflow where users can select a quantity range and add it to their cart?

You can create a range slider add-to-cart feature in Webflow using custom JavaScript and Webflow eCommerce components. Below are the steps to achieve this.

1. Add a Range Slider to Your Webflow Page

• Drag a Form Block into your product page or section.
• Inside the form, add an Input Field and set its Type to range.
• Customize the slider by setting attributes:
• Min: Minimum quantity (e.g., 1).
• Max: Maximum quantity (e.g., 10).
• Step: Incremental value (e.g., 1).
• Value: Default starting value.

2. Display the Selected Quantity

• Add a Text Block next to the slider to display the selected quantity.
• Give it a unique ID or class (e.g., #quantity-display).

3. Get Webflow’s Add to Cart Button

• Drag a Webflow Add-to-Cart component onto the page.
• Select the Quantity Input inside the cart component.
• Make it hidden using display: none in the Style panel.

4. Add Custom JavaScript to Sync the Slider with the Cart

• Open Page Settings and add the following JavaScript inside the Before Body section:
  ```javascript
  document.addEventListener("DOMContentLoaded", function () {
  const slider = document.querySelector('input[type="range"]');
  const quantityDisplay = document.querySelector("#quantity-display");
  const quantityInput = document.querySelector('.w-commerce-commerceaddtocartform input[name="quantity"]');

  if (slider && quantityDisplay && quantityInput) {
  slider.addEventListener("input", function () {
  quantityDisplay.textContent = slider.value;
  quantityInput.value = slider.value;
  });
  }
  });
  ```

• This script will update both the displayed quantity and the hidden quantity input when the user moves the slider.

5. Test the Functionality

• Preview the page and confirm:
• Moving the slider updates the displayed quantity.
• Clicking Add to Cart adds the selected quantity correctly.

Summary

This solution links a range slider to Webflow’s Add to Cart button by updating the hidden quantity field with JavaScript. The selected value dynamically changes based on user interaction.