Range Slider Webflow (with custom element)

Create custom range sliders in  webflow form with attributes. Elevate your form designs by adding sleek, interactive sliders that give users precise control over their inputs.

Basic html structure:

Start by adding a custom element to your form and setting its tag as an input. Then, head to the attribute section, where you'll define the type as 'range' and set your desired maximum and minimum values. Once the functionality is in place, it's time to style your slider using CSS to match your website's design (Check out the css below).  With these simple steps, you can create a polished, interactive form element that offers users precise control, enhancing both the look and usability of your forms.
Check out mdn website to learn more

Style the Range slider with these CSS

<style>
    /* Basic styles for the range input */
    .range {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 10px;
        background: white;
        outline: none;
    }

    /* Track styles */
    .range::-webkit-slider-runnable-track {
        width: 100%;
        height: 10px;
        background: white;
        border-radius: 5px;
    }
    
    .range::-moz-range-track {
        width: 100%;
        height: 10px;
        background: white;
        border-radius: 5px;
    }

    .range::-ms-track {
        width: 100%;
        height: 10px;
        background: white;
        border-radius: 5px;
        border-color: transparent;
        color: transparent;
    }

    /* Thumb styles */
    .range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: #fd4c00;
        cursor: pointer;
        border-radius: 50%;
        margin-top: -5px;
    }

    .range::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: #fd4c00;
        cursor: pointer;
        border-radius: 50%;
    }

    .range::-ms-thumb {
        width: 20px;
        height: 20px;
        background: #fd4c00;
        cursor: pointer;
        border-radius: 50%;
    }
</style>

Javascript code for real time update of text

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var cost = document.querySelector("#cost");
    var input = document.querySelector(".range");

    function updateUI() {
      const formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
      });
      var calculatedValue = input.value;
      cost.textContent = formatter.format(calculatedValue);
    }

    // Initial update to set the default value
    updateUI();

    // Event listener for slider change
    input.addEventListener("input", () => {
      updateUI(); // Update UI
    });
  });
</script>
Contact us

$2000

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Made with ❤️ by Pixeto.co