Currently in the process of setting up a pricing table that adjusts based on the number of users being registered. You can test the functionality on our development site here. My main concern is how to dynamically change the price displayed according to the user input range, as outlined in our pricing structure table located at this link.
To achieve this, I am incorporating an input range from CodePen for user convenience: CodePen Input Range
For displaying the price, we have implemented the following code:
<div class="price-card--price-text">
<div class="price-card--price-number toggle-price-content odometer" data-price-monthly="18.71" data-price-yearly="224.52">18.71</div>
</div>
The input range setup looks like this:
<p> Number of users </p>
<div class="range">
<input type="range" id="slider2" min="1" max="5" steps="1" value="1">
</div>
<ul class="range-labels">
<li class="active selected">1</li>
<li>2-20</li>
<li>21-99</li>
<li>100-999</li>
<li>1000+</li>
</ul>Additionally, here is the JavaScript function responsible for toggling the price content between monthly and yearly:
function togglePriceContent() {
if ($(toggleSwitch).is(":checked") === true) {
// switch to yearly pricing
$(".toggle-price-content").each(function() {
$(this).html($(this).data("price-yearly"));
});
} else {
// switch to monthly pricing
$(".toggle-price-content").each(function() {
$(this).html($(this).data("price-monthly"));
});
}
}