如何基于用户数量范围输入框实现定价表格的价格动态变更？

Got it, let's tackle this dynamic pricing feature that updates based on your user count slider. Here's a step-by-step implementation that integrates seamlessly with your existing code:

1. Define Your Price Dataset #

First, create a structured object to store the monthly/yearly prices for each user range. This makes it easy to fetch the correct price when the slider changes:

// Replace these values with your actual pricing from the standard price table
const userRangePrices = [
  { monthly: 18.71, yearly: 224.52 },    // 1 user
  { monthly: 32.40, yearly: 388.80 },    // 2-20 users
  { monthly: 75.60, yearly: 907.20 },    // 21-99 users
  { monthly: 151.20, yearly: 1814.40 },  // 100-999 users
  { monthly: 280.00, yearly: 3360.00 }   // 1000+ users
];

2. Sync Slider with Range Labels & Update Price #

Next, write a function to handle slider changes, update the active range label, and trigger a price refresh:

function updateUserRange() {
  const slider = document.getElementById('slider2');
  const rangeLabels = document.querySelectorAll('.range-labels li');
  const currentRangeIndex = slider.value - 1; // Convert slider value (1-5) to 0-based index

  // Update label selection state
  rangeLabels.forEach((label, index) => {
    label.classList.remove('active', 'selected');
    if (index === currentRangeIndex) {
      label.classList.add('active', 'selected');
    }
  });

  // Update price display with the current range's pricing
  updatePriceDisplay(currentRangeIndex);
}

3. Build the Price Update Logic #

Create a reusable function that updates the price based on both the selected user range and the monthly/yearly toggle state. This replaces and enhances your existing togglePriceContent function:

function updatePriceDisplay(rangeIndex) {
  const isYearlySelected = $(toggleSwitch).is(":checked");
  const selectedPrices = userRangePrices[rangeIndex];
  const displayPrice = isYearlySelected ? selectedPrices.yearly : selectedPrices.monthly;

  // Update all price elements
  $(".toggle-price-content").each(function() {
    // If using Odometer for animations, use its update method instead of html()
    $(this).html(displayPrice.toFixed(2));
    
    // Optional: Keep data attributes in sync with current prices
    $(this)
      .data("price-monthly", selectedPrices.monthly)
      .data("price-yearly", selectedPrices.yearly);
  });
}

4. Wire Up Event Listeners #

Initialize the functionality on page load and add listeners for slider changes, label clicks, and the monthly/yearly toggle:

$(document).ready(function() {
  // Set initial price based on default slider value (1 user)
  updateUserRange();

  // Listen for slider input changes
  document.getElementById('slider2').addEventListener('input', updateUserRange);

  // Make range labels clickable for better UX
  document.querySelectorAll('.range-labels li').forEach((label, index) => {
    label.addEventListener('click', () => {
      document.getElementById('slider2').value = index + 1; // Match slider value to label index
      updateUserRange();
    });
  });

  // Update toggle functionality to use our new price logic
  $(toggleSwitch).on('change', function() {
    const currentRangeIndex = document.getElementById('slider2').value - 1;
    updatePriceDisplay(currentRangeIndex);
  });
});

5. Odometer Animation Fix (If Needed) #

If your Odometer component isn't animating when prices update, replace the $(this).html(...) line with Odometer's official update method:

// For Odometer 2.x
this.odometer.update(displayPrice.toFixed(2));

// Or if using data attributes:
$(this).attr('data-odometer-final', displayPrice.toFixed(2));

This implementation ensures that whenever a user adjusts the slider or clicks a range label, the prices update instantly—while still working with your existing monthly/yearly toggle. Just swap out the placeholder prices in userRangePrices with your actual values from the standard pricing structure.

内容的提问来源于stack exchange，提问作者cheunology