Range Slider

This guide does not cover creating the slider as it uses Finsweets range slider. Follow the link below for full instructions.
Finsweet range slider
 <script>
/* [Rule5Design] Update another element using a range slider  */
document.addEventListener('DOMContentLoaded', function() {
  const slider = document.getElementById('slidervalue');
  const plusPlanValue = document.getElementById('plusplan');
  const proPlanValue = document.getElementById('proplan');

  slider.addEventListener('input', function() {
    const value = parseInt(slider.value);

    const plusValue = value * 8;
    const proValue = 114 + (value - 1) * 15;

    plusPlanValue.textContent = plusValue;
    proPlanValue.textContent = proValue;
  });
});
</script>
Paste the above script into your pages custom code into the before </head> tag.
Your plan pricing elements need to be given an ID in the element settings tab. In the case of this script. proplan and plusplan
0
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Plus Plan
Plus
Pro Plan
Pro