How to create a customized pricing plans using slider in html

Customized pricing plans using the slider in HTML

In every company’s website, there will be some default plans for the customers for purchasing that company’s products. Some customers will be satisfied by the default plans and some will be unsatisfied. For those unsatisfied customers, we have developed an optional customize resources plans using pricing slider according to their requirements.

Now we are going to learn about how to create customized pricing plans under slider in HTML with CSS by the following steps:

Step One:

Declare a “Div tag” and Inside the “Div tag” declare a form.

Step Two:

Now declare a CSS for the customize resources requirements optional for “input field” in “span tag”.

Step Three:

Create Optional Customize resources lists Contains 4 pricing sliders,

such as,

  • CPU
  • RAM
  • SSD
  • IPs

CPU:

In CPU pricing slider for every 1 CPU core, it is priced as £6 (i.e. £6 per extra for CPU core). If you need 2 CPU core, then it will be priced as £12. The minimum and maximum range of CPU core will be given in the pricing slider. According to your requirement of extra CPU core, the price will differ.

For Example:

  • For CPU Core 3 = 3*6 = £18
  • For CPU core 5 = 5*6 = £30
  • For CPU core 10 = 10*6 = £60

RAM:

In RAM pricing slider for every 1GB RAM, it is priced as £3(i.e. £3 per extra for extra GB of memory). If you need 2GB RAM, then it will be priced as £6. The minimum and maximum range of RAM memory will be given in the pricing slider. According to your requirement of extra RAM memory, the price will differ.

For Example:

  • For 3GB memory = 3*3 = £9
  • For 5GB memory = 5*3 = £15
  • For 10GB memory = 10*3 = £30

SSD:

In SSD pricing slider for every 10GB of disk space, it is priced as £30(i.e. £3 per extra for extra 10GB of disk space). If you need 20GB of disk space, then it will be priced as £60. The minimum and maximum range of disk space will be given in the pricing slider. According to your requirement of extra 10GB of disk space, the price will differ.   

For Example:

  • For 30GB of Disk space = 30*3 = £90
  • For 50GB of Disk space = 50*3 = £150
  • For 100GB of Disk space = 100*3 = £300

IPs:

In IPs pricing slider for every 1 IPs, it is priced as £10(i.e. £10 per extra for extra 1 IPs). If you need 2IPS, then it will be priced as £20. The minimum and maximum range of IPs will be given in the pricing slider. According to your requirement of extra IPs, the price will differ.   

For Example:

  • For 3 IPS = 3*10 = £30
  • For 5 IPs = 5*10 = £50
  • For 10 IPs = 10*10 = £100

Step Four:

Declare a “Div tag” and Inside the “Div tag” declare add additional resources optional for “input field” in “span tag”.

Now, give operating system options from add additional resources and services(Optional one). (i.e.,) Operating System options such as,

  1. Cent OS 6*64
  2. Cent OS 7*64
  3. Ubuntu 14.04*64
  4. Ubuntu 16.04*64
  5. Ubuntu 17.10*64
  6. Debian 7*64
  7. Debian 8*64
  8. Debian 9*64
  9. Fedora 26*64
  10. Fedora 27*64 etc…

Step Five:

Declare “Div tag” and create “plan currently selected” and price lists which includes CPUs, RAM, Disc Space, IPs, and OS.

Step Six:

Create “Total amount value”, and input as a form control. At last, create “Buy now” option.

That’s it!!! By following the above six steps,  you will be able to know how to create a customized pricing plans using the slider and how the total cost will be calculated.

The sample coding and output are given below:

Sample Code:

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>Pricing Slider</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
 <section>
 <div class="container">
 <div class="price-box">
 <form class="form-horizontal form-pricing" role="form">
 <div class="col-sm-7 col-md-7 price-resources">
 <div class="resources-lists">
 <h2>Customise resources to your requirements <span>(optional)</span></h2>
 <ul>
 <li>
 <div class="price-slider">
 <h4><img alt="cpu" src="">CPU: <span id="cpu-value"></span></h4>
 <p><span>Price:</span> £6 per extra CPU core</p>
 <div class="col-sm-12">
 <div id="slider1"></div>
 </div>
 </div>
 </li>
 <li>
 <div class="price-slider">
 <h4><img alt="ram" src="">RAM: <span id="ram-value"></span></h4>
 <p><span>Price:</span> £3 per extra GB of memory</p>
 <div class="col-sm-12">
 <div id="slider2"></div>
 </div>
 </div>
 </li>
 <li>
 <div class="price-slider">
 <h4><img alt="ssd" src="">SSD: <span id="ssd-value"></span></h4>
 <p><span>Price:</span> £3 per extra 10GB of disk space</p>
 <div class="col-sm-12">
 <div id="slider3"></div>
 </div>
 </div>
 </li>
 <li>
 <div class="price-slider">
 <h4><img alt="ips" src="">IPs: <span id="ips-value"></span></h4>
 <p><span>Price:</span> £10 per extra IP</p>
 <div class="col-sm-12">
 <div id="slider4"></div>
 </div>
 </div>
 </li>
 </ul>
 <h3>Add additional resources and services <span>(optional)</span></h3>
 <label class="os-clr-text">Operating System:</label>
 <select id="os" onchange="osFunction()">
 <option value="Cent OS 6*64">Cent OS 6*64</option>
 <option value="Cent OS 7*64">Cent OS 7*64</option>
 <option value="Ubuntu 14.04*64">Ubuntu 14.04*64</option>
 <option value="Ubuntu 16.04*64">Ubuntu 16.04*64</option>
 <option value="Ubuntu 17.10*64">Ubuntu 17.10*64</option>
 <option value="Debian 7*64">Debian 7*64</option>
 <option value="Debian 8*64">Debian 8*64</option>
 <option value="Debian 9*64">Debian 9*64</option>
 <option value="Fedora 26*64">Fedora 26*64</option>
 <option value="Fedora 27*64">Fedora 27*64</option>
 </select>
 </div>
 </div>
 <div class="col-sm-5 col-md-5 price-valus">
 <h6>Plan currently selected:</h6>
 <p>A perfect starting system for smaller projects with minimal resource requirements</p>
 <div class="price-form">
 <h6>price includes:</h6>
 <table>
 <tbody>
 <tr>
 <th><label for="cpuamt" class="">CPUs: </label></th>
 <td><input type="hidden" id="cpuamt" class="form-control"><p class="" id="cpuamt-label"></p></td>
 <td><p class="" id="total-cpuamt"></p></td>
 </tr>
 <tr>
 <th><label for="ramamt" class="">RAM: </label></th>
 <td><input type="hidden" id="ramamt" class="form-control"><p class="" id="ramamt-label"></p></td>
 <td><p class="" id="total-ramamt"></p></td>
 </tr>
 <tr>
 <th><label for="ssdamt" class="">Disk Space: </label></th>
 <td><input type="hidden" id="ssdamt" class="form-control"><p class="" id="ssdamt-label"></p></td>
 <td><p class="" id="total-ssdamt"></p></td>
 </tr>
 <tr>
 <th><label for="ipsamt" class="">IPs: </label></th>
 <td><input type="hidden" id="ipsamt" class="form-control"><p class="" id="ipsamt-label"></td>
 <td><p class="" id="total-ipsamt"></p></td>
 </tr>
 <tr>
 <th><label for="osname" class="">OS:</label></th>
 <td><p id="osname">Debian 7.0 x64</p></td>
 <td><p>included</p></td>
 </tr>
 </tbody>
 </table>
 <div class="totals-amount-value">
 <label for="total">Total Cost: </label>
 <input type="hidden" id="total" class="form-control">
 <p class="totals-value" id="total-label"></p>
 </div>
 <a class="order-vps" href="#">Buy Now</a>
 </div>
 </div>
 </form>
 </div>
 </div>
 </section>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
 <script src="js/style.js"></script>
 </body>
</html>

Sample CSS:

.ui-widget-content {border: 1px solid #959595;background: #f7faff;height: 20px;}
.ui-corner-all {border-radius: 5px;}
.ui-slider .ui-slider-handle {position: absolute;cursor: pointer;background: #000;padding: 20px;margin: -10px -20px;}
.ui-slider .ui-slider-handle:before, .ui-slider .ui-slider-handle:after{content:"";display:block;position:absolute;height: 20px;width: 1px;background:#E8E7E6;left:17px;top: 10px;}
.ui-slider .ui-slider-handle:after{left: 23px;}
.price-slider {margin: 50px 0;}
ul{padding: 0;}
li{display: inline-block;width: 49%;padding: 0 30px;}
h4 span{float: right;}
table{width: 100%;}
td, th {width: 33%;padding: 5px;border-bottom: 1px solid rgba(255,255,255,0.15);}

Sample js:

function osFunction() {
 var x = document.getElementById("os").value;
 document.getElementById("osname").innerHTML = x;
}


$(document).ready(function() {
 $("#slider1").slider({
 range: "min",
 animate: true,
 value:2,
 min: 1,
 max: 16,
 step: 1,
 slide: function(event, ui) {
 update(1,ui.value); //changed
 }
 });
 
 $("#slider2").slider({
 range: "min",
 animate: true,
 value:2,
 min: 1,
 max: 64,
 step: 1,
 slide: function(event, ui) {
 update(2,ui.value); //changed
 }
 });
 
 $("#slider3").slider({
 range: "min",
 animate: true,
 value:40,
 min: 20,
 max: 500,
 step: 10,
 slide: function(event, ui) {
 update(3,ui.value); //changed
 }
 });
 
 $("#slider4").slider({
 range: "min",
 animate: true,
 value:2,
 min: 1,
 max: 5,
 step: 1,
 slide: function(event, ui) {
 update(4,ui.value); //changed
 }
 });
 
 //Added, set initial value.
 $("#cpuamt").val(2);
 
 $("#ramamt").val(2);
 
 $("#ssdamt").val(30);
 
 $("#ipsamt").val(2);
 
 update();
});

function update(slider,val) {
 var formatNumber = {
 separador: ",",
 sepDecimal: '.',
 formatear:function (num){
 num +='';
 var splitStr = num.split('.');
 var splitLeft = splitStr[0];
 var splitRight = splitStr.length > 1 ? this.sepDecimal + splitStr[1] : '';
 var regx = /(\d+)(\d{3})/;
 while (regx.test(splitLeft)) {
 splitLeft = splitLeft.replace(regx, '$1' + this.separador + '$2');
 }
 return this.simbol + splitLeft + splitRight;
 },
 new:function(num, simbol){
 this.simbol = simbol ||'';
 return this.formatear(num);
 }
 }
 
 //changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
 var $cpuamt = slider == 1?val:$("#cpuamt").val();
 var $ramamt = slider == 2?val:$("#ramamt").val();
 var $ssdamt = slider == 3?val:$("#ssdamt").val();
 var $ipsamt = slider == 4?val:$("#ipsamt").val();
 
 $cpu = ($cpuamt * 6);
 $ram = ($ramamt * 3);
 $ssd = ($ssdamt * 3);
 $ips = ($ipsamt * 10);
 
 $total = $cpu + $ram + $ssd + $ips
 
 $( "#cpuamt" ).val($cpuamt);
 $( "#cpuamt-label" ).text($cpuamt);
 $( "#total-cpuamt" ).html('<label><span class="currency-value">£</span> '+$cpu+ '</label>');
 
 $( "#ramamt" ).val($ramamt);
 $( "#ramamt-label" ).html($ramamt+ 'GB');
 $( "#total-ramamt" ).html('<label><span class="currency-value">£</span> '+$ram+ '</label>');
 
 $( "#ssdamt" ).val($ssdamt);
 $( "#ssdamt-label" ).html($ssdamt+ 'GB');
 $( "#total-ssdamt" ).html('<label><span class="currency-value">£</span> '+$ssd+ '</label>');
 
 $( "#ipsamt" ).val($ipsamt);
 $( "#ipsamt-label" ).text($ipsamt);
 $( "#total-ipsamt" ).html('<label><span class="currency-value">£</span> '+$ips+ '</label>');
 
 $( "#total" ).val($total);
 $( "#total-label" ).html('<label><span class="currency-value">£</span> '+$total+ '<span class="month-range">/Month</span></label>');
 
 $('#cpu-value').html($cpuamt);
 $('#ram-value').html($ramamt+ 'GB');
 $('#ssd-value').html($ssdamt+ 'GB');
 $('#ips-value').html($ipsamt);
}

Example Output:

The above image shows you an example output of this customized pricing plans using the slider in HTML.

If you stuck at some point or if you feel any difficulty in customizing pricing plans using the slider, then don’t hesitate to contact us.

Last Update: March 22, 2018  

March 16, 2018   82   Padma Priya    Wordpress    
Total 3 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Google+
http://www.webnexs.com/blog/kb/customized-pricing-plans-using-slider-html
Twitter
LinkedIn