Cost Calculator in Elementor – Free With no Plugins

If you are looking to add a simple cost calculator to your website here is a simple code that you can use. No plugins, just plain HTML, JavaScript, and CSS. Check the video below and grab the code snippet to apply to your project.

Code snippet

<div class="calculator">
  <h2>Price Calculator</h2>
  <div class="form-group">
    <label for="product-option">Product Option:</label>
    <select id="product-option">
      <option value="basic">Basic</option>
      <option value="premium">Premium</option>
      <option value="deluxe">Deluxe</option>
      <option value="vip">VIP</option>
    </select>
  </div>
  <div class="form-group">
    <label for="quantity">Quantity: <span id="quantity-value">1</span></label>
    <input type="range" id="quantity" min="1" max="100" value="1" />
  </div>
  <div class="form-group">
    <label> <input type="checkbox" id="feature1" /> Feature 1 (+$100) </label>
  </div>
  <div class="form-group">
    <label> <input type="checkbox" id="feature2" /> Feature 2 (+$75) </label>
  </div>
  <h3 id="total-price">Total Price: $100</h3>
</div>

<script>
  const productOption = document.getElementById("product-option")
  const quantity = document.getElementById("quantity")
  const quantityValue = document.getElementById("quantity-value")
  const feature1 = document.getElementById("feature1")
  const feature2 = document.getElementById("feature2")
  const totalPriceElement = document.getElementById("total-price")

  const basePrices = {
    basic: 100,
    premium: 200,
    deluxe: 300,
    vip: 400
  }

  // Create a formatter for USD currency
  const formatter = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })

  function calculatePrice() {
    let price = basePrices[productOption.value]
    price *= quantity.value

    if (feature1.checked) price += 100
    if (feature2.checked) price += 75

    totalPriceElement.textContent = `Total Price: ${formatter.format(price)}`
  }

  productOption.addEventListener("change", calculatePrice)
  quantity.addEventListener("input", () => {
    quantityValue.textContent = quantity.value
    calculatePrice()
  })
  feature1.addEventListener("change", calculatePrice)
  feature2.addEventListener("change", calculatePrice)

  // Initial calculation
  calculatePrice()
</script>

<style>
  .calculator {
    border: 1px solid #e7e8ee;
    padding: 24px;
    border-radius: 8px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  label {
    display: block;
    margin-bottom: 5px;
  }
  select,
  input[type="range"] {
    width: 100%;
  }
  /* Custom styles for range input */
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    border-radius: 5px;
    background: #e7e8ee;
    transition: opacity 0.2s;
  }

  input[type="range"]:hover {
    opacity: 1;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #8358ff;
    margin-top: -10px;
    cursor: pointer;
  }

  input[type="range"]::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #8358ff;
    cursor: pointer;
  }

  #total-price {
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 20px;
  }
</style>