How to create a pricing slider with Tailwind CSS and JavaScript

Let's recreate the pricing slider from the tutorial with Alpine.js but with vainilla JavaScript.

See it live and get the coe

Some background on pricing sliders

A pricing slider is a slider that allows you to select a price range. It is a great way to help your customers choose the right plan for their needs but in thise very case we will allowe the user to select the number of pageviews and we will calculate the price based on the pageviews the user has selected.

Use cases:

• Subscription Plans: Offering various subscription tiers tailored to different user needs.
• Product Pricing: Dynamically adjusting product prices based on user-selected features or usage metrics.
• Service Packages: Providing customizable service packages with different levels of features or support.
• Membership Levels: Offering different membership levels with varying access and benefits.
• Software Licensing: Implementing tiered licensing models for software products based on usage or functionality.

and many more.

Understanding the code:

• <input type="range" id="pageviews" min="0" max="1000000" step="1000" />: This is the HTML structure that will display the pricing slider.
• <label for="pageviews">Pageviews</label>: This is the HTML structure that will display the label for the pageviews input.
• <input type="number" id="inputPageviews" />: This is the HTML structure that will display the pageviews input field.
• <span id="pageviewsText"></span>: This is the HTML structure that will display the pageviews value in a read-only input field.

Classes are omited for brevity and clarity.

<div>
  <div>
    <input type="range" id="pageviews" min="0" max="1000000" step="1000" />
  </div>
  <div>
    <label for="pageviews">Pageviews</label>
    <input type="number" id="inputPageviews" />
  </div>
  <div>
    <p>
      <span>$ <input type="text" id="price" readonly />
      </span>
    </p>
    <div>
      <label for="pageviews">Pageviews</label>
      <span id="pageviewsText"></span>
    </div>
    <p> This plan is tailored for small businesses and startups </p>
    <div>
      <button type="submit">Get access</button>
    </div>
    <p> Invoices and receipts available for easy company reimbursement </p>
  </div>
</div>

The JavaScript

Creating the pricing slider

• document.addEventListener("DOMContentLoaded", function() {: This is the event listener that will be triggered when the DOM is fully loaded.
• const pageviewsInput = document.getElementById("pageviews");: This is the variable that will be used to target the pageviews input element.
• const inputPageviews = document.getElementById("inputPageviews");: This is the variable that will be used to target the input pageviews element.
• const priceInput = document.getElementById("price");: This is the variable that will be used to target the price input element.
• const pageviewsText = document.getElementById("pageviewsText");: This is the variable that will be used to target the pageviews text element.

Calculating the price

• function calculatePrice(pageviews) {: This is the function that will be used to calculate the price based on the pageviews.
• return (Math.ceil(pageviews / 1000) * 0.001 * 50).toFixed(2);: This is the calculation that will be used to calculate the price based on the pageviews.

Updating the price and pageviews

• function updatePriceAndPageviews(pageviews) {: This is the function that will be used to update the price and pageviews.
• priceInput.value = calculatePrice(pageviews);: This is the line that will be used to update the price input element.
• pageviewsText.textContent = parseInt(pageviews, 10).toLocaleString();: This is the line that will be used to update the pageviews text element.

Handling the input events

• function handleInput(event) {: This is the function that will be used to handle the input events.
• const pageviews = event.target.value;: This is the line that will be used to get the value of the pageviews input element.
• pageviewsInput.value = pageviews;: This is the line that will be used to update the pageviews input element.
• inputPageviews.value = pageviews;: This is the line that will be used to update the input pageviews element.
• updatePriceAndPageviews(pageviews);: This is the line that will be used to update the price and pageviews based on the new value of the pageviews input element.

Adding the event listeners

• pageviewsInput.addEventListener("input", handleInput);: This is the line that will be used to add the event listener to the pageviews input element.
• inputPageviews.addEventListener("input", handleInput);: This is the line that will be used to add the event listener to the input pageviews element.

Initializing the values

• pageviewsInput.value = 0;: This is the line that will be used to initialize the pageviews input element with a value of 0.
• inputPageviews.value = 0;: This is the line that will be used to initialize the input pageviews element with a value of 0.
• updatePriceAndPageviews(0);: This is the line that will be used to update the price and pageviews based on the initial value of the pageviews input element.

document.addEventListener("DOMContentLoaded", function() {
    const pageviewsInput = document.getElementById("pageviews");
    const inputPageviews = document.getElementById("inputPageviews");
    const priceInput = document.getElementById("price");
    const pageviewsText = document.getElementById("pageviewsText");

    function calculatePrice(pageviews) {
        return (Math.ceil(pageviews / 1000) * 0.001 * 50).toFixed(2);
    }

    function updatePriceAndPageviews(pageviews) {
        priceInput.value = calculatePrice(pageviews);
        pageviewsText.textContent = parseInt(pageviews, 10).toLocaleString();
    }

    function handleInput(event) {
        const pageviews = event.target.value;
        pageviewsInput.value = pageviews;
        inputPageviews.value = pageviews;
        updatePriceAndPageviews(pageviews);
    }

    pageviewsInput.addEventListener("input", handleInput);
    inputPageviews.addEventListener("input", handleInput);

    // Initialize with default value
    pageviewsInput.value = 0;
    inputPageviews.value = 0;
    updatePriceAndPageviews(0);
});

Conclusion

In this tutorial, we learned how to create a pricing slider with Tailwind CSS and JavaScript. We covered the basic structure of the project, the JavaScript code, and the pricing slider elements. We also discussed the calculation of the price and the updating of the price and pageviews based on the new value of the pageviews input element. By following these steps, you can create a visually appealing and functional pricing slider that can be used in various applications. Remember to make your pricing slider responsive and user-friendly, and to test it thoroughly to ensure it works as expected.

Hope you enjoyed this tutorial and have a great day!