Adding an ion-rangeslider parameter

Hello!

I have renewed my licence and need some help

on this page https://canvastemplate.com/demo-hosting.html in the "Hosting that scales with your business" section

I need to add a fourth parameter: the number of emails, "numberemail".

I have made attempts but with little success....

Please can you help me out?

Thank you!

I tried this way but something is wrong with the total counts:

         jQuery(document).ready( function() {
         	var pricingCPU = 1,
         		pricingRAM = 1,
         		pricingStorage = 10,
		 		pricingMAIL = 1,
         		elementCPU = jQuery(".range-slider-cpu"),
         		elementRAM = jQuery(".range-slider-ram"),
         		elementStorage = jQuery(".range-slider-storage");
		 		elementMAIL = jQuery(".range-slider-mail");
         
         	elementCPU.ionRangeSlider({
         		grid: false,
         		values: [1,2,4,6,8],
         		postfix: ' Core',
         		onStart: function(data){
         			pricingCPU = data.from_value;
         		}
         	});
         
         	elementCPU.on( 'change', function(){
         		pricingCPU = jQuery(this).prop('value');
         		calculatePrice( pricingMAIL, pricingCPU, pricingRAM, pricingStorage );
         	});
         
         	elementRAM.ionRangeSlider({
         		grid: false,
         		step: 1,
         		min: 1,
         		from:1,
         		max: 32,
         		postfix: ' GB',
         		onStart: function(data){
         			pricingRAM = data.from;
         			console.log(data);
         		}
         	});
         
         	elementRAM.on( 'onStart change', function(){
         		pricingRAM = jQuery(this).prop('value');
         		calculatePrice( pricingMAIL, pricingCPU, pricingRAM, pricingStorage );
         	});
         
         	elementStorage.ionRangeSlider({
         		grid: false,
         		step: 10,
         		min: 10,
         		max: 100,
         		postfix: ' GB',
         		onStart: function(data){
         			pricingStorage = data.from;
         		}
         	});
         
         	elementStorage.on( 'change', function(){
         		pricingStorage = jQuery(this).prop('value');
         		calculatePrice( pricingMAIL, pricingCPU, pricingRAM, pricingStorage );
         	});
		 	

		 	elementMAIL.ionRangeSlider({
         		grid: false,
         		step: 1,
         		min: 1,
         		max: 50,
         		postfix: ' Mail',
         		onStart: function(data){
         			pricingMAIL = data.from;
         		}
         	});
         
         	elementMAIL.on( 'change', function(){
         		pricingMAIL = jQuery(this).prop('value');
         		calculatePrice( pricingCPU, pricingRAM, pricingStorage, pricingMAIL );
         	});

         
         	calculatePrice( pricingCPU, pricingRAM, pricingStorage, pricingMAIL );
         
         	function calculatePrice( cpu, ram, storage, mail ) {
         		var pricingValue = ( Number(cpu) * 10 ) + ( Number(ram) * 8 ) + ( Number(storage) * 0.5 ) + ( Number(mail) * 1 );
         		jQuery('.cpu-value').html(pricingCPU);
         		jQuery('.ram-value').html(pricingRAM);
         		jQuery('.storage-value').html(pricingStorage);
		 		
		 		jQuery('.mail-value').html(pricingMAIL);
		 		
         		jQuery('.cpu-price').html('€ '+pricingCPU * 10);
         		jQuery('.ram-price').html('€ '+pricingRAM * 8);
         		jQuery('.storage-price').html('€ '+pricingStorage * 0.5);
		 		
		 		jQuery('.mail-price').html('€ '+pricingMAIL * 1);
         		
		 		jQuery('.pricing-price').html( '€ '+pricingValue );
		 		
		 		jQuery('.pricing-mail').html( '€ '+pricingValue );
         	}
         });
         
         
      

Hello, it works like a charm!
Now I'm trying to study it well to understand how it works.
But is there any documentation?

Anyway thanks!!! :-)