How to create a customized pricing plans using slider in HTML?

Learn how to create customized pricing plans using the slider in HTML with easy steps.

On every company’s website, there will be some default plans for the customers for purchasing that company’s products. Some customers will be satisfied with the default plans and some will be unsatisfied.

One stop solutions for all website design needs, click here and start scaling your business!!!

For those unsatisfied customers, we have developed optional customize resources plans using a pricing slider according to their requirements.

Customized pricing plans using the slider in HTML

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:

In the CPU pricing slider for every 1 CPU core, it is priced at £6 (i.e. £6 per extra for CPU core). If you need 2 CPU core, then it will be priced at £12. The minimum and maximum range of CPU core will be given in the pricing slider. According to your requirement for an 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 at £6. The minimum and maximum range of RAM memory will be given in the pricing slider. According to your requirement for 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 the SSD pricing slider for every 10GB of disk space, it is priced as £30(i.e. £3 per extra for an extra 10GB of disk space). If you need 20GB of disk space, then it will be priced at £60. The minimum and maximum range of disk space will be given in the pricing slider. According to your requirement for an 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 the 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 at £20. The minimum and maximum range of IPs will be given in the pricing slider. According to your requirement for 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,

Cent OS 6*64
Cent OS 7*64
Ubuntu 14.04*64
Ubuntu 16.04*64
Ubuntu 17.10*64
Debian 7*64
Debian 8*64
Debian 9*64
Fedora 26*64
Fedora 27*64 etc…

Step Five:

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

Step Six:

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

That’s it!!! By following the above six steps, you will be able to know how to create 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 these 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.

How to create a customized pricing plans using slider in HTML?

Customized pricing plans using the slider in HTML

Step One:

Step Two:

Step Three:

CPU:

RAM:

SSD:

IPs:

Step Four:

Step Five:

Step Six:

Sample Code:

Sample CSS:

Example Output:

Experience All-in-One OTT Platform Solution

Comments

Leave a Reply Cancel reply