"Fuel Cost Calculator"
Bootstrap 3.1.0 Snippet by skmahi

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="price-box"> <div class="row"> <div class="col-sm-6"> <form class="form-horizontal form-pricing" role="form"> <div class="price-slider"> <h4 class="great">Average Miles Per Year</h4> <div class="col-sm-12"> <div id="slider_mpy"></div> </div> </div> <div class="price-slider"> <h4 class="great">Average Diesel MPG</h4> <div class="col-sm-12"> <div id="slider_mpg"></div> </div> </div> <div class="price-slider"> <h4 class="great">Diesel Pump Cost</h4> <div class="col-sm-12"> <div id="slider_diesel"></div> </div> </div> <div class="price-slider"> <h4 class="great">Natural Gas Cost</h4> <div class="col-sm-12"> <div id="slider_natgas"></div> </div> </div> </div> <div class="col-sm-6"> <div class="price-form"> <div class="form-group"> <div class="row"> <div class="col-sm-6"> <label class="control-label">Total Diesel Gallons Consumed</label> </div> <div class="col-sm-6"> <input type="hidden" id="amount_amirol" class="form-control"> <input class="price lead" name="dieselGallons" type="text" id="dieselGallons" disabled="disabled" style="" /> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6"> <label class="control-label">Diesel Cost</label> </div> <div class="col-sm-6"> <input type="hidden" id="amount_amirol" class="form-control"> <input class="price lead" name="dieselCost" type="text" id="dieselCost" disabled="disabled" style="" /> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6"> <label class="control-label">CNG cost</label> </div> <div class="col-sm-6"> <input type="hidden" id="amount_amirol" class="form-control"> <input class="price lead" name="cngCost" type="text" id="cngCost" disabled="disabled" style="" /> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6"> <label class="control-label">Savings</label> </div> <div class="col-sm-6"> <input type="hidden" id="amount_amirol" class="form-control"> <input class="price lead" name="savings" type="text" id="savings" disabled="disabled" style="" /> </div> </div> </div> </div> </form> </div> </div> </div> </div> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
body { padding-top: 60px; } .price-box { margin: 0 auto; background: #E9E9E9; border-radius: 10px; padding: 40px 15px; /*width: 500px;*/ } .ui-widget-content { border: 1px solid #bdc3c7; background: #e1e1e1; color: #222222; margin-top: 4px; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 7.2em; height: 2.7em; cursor: default; margin: 0 -40px auto !important; text-align: center; line-height: 30px; color: #FFFFFF; font-size: 12px; } .ui-slider .ui-slider-handle .glyphicon { color: #FFFFFF; margin: 0 1px; font-size: 11px; opacity: 0.7; } .ui-corner-all { border-radius: 20px; } .ui-slider-horizontal .ui-slider-handle { top: -.9em; } .ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #f9f9f9; background: #3498db; } .ui-slider-horizontal .ui-slider-handle { margin-left: -0.5em; } .ui-slider .ui-slider-handle { cursor: pointer; } .ui-slider a, .ui-slider a:focus { cursor: pointer; outline: none; } .price, .lead p { font-weight: 600; font-size: 32px; display: inline-block; line-height: 60px; border:0; width: 245px; } h4.great { margin: 0 0 25px 0; padding: 7px 15px; font-size: 18px; font-weight: 600; } .total { border-bottom: 1px solid #7f8c8d; /*display: inline; padding: 10px 5px;*/ position: relative; padding-bottom: 20px; } .total:before { content: ""; display: inline; position: absolute; left: 0; bottom: 5px; width: 100%; height: 3px; background: #7f8c8d; opacity: 0.5; } .price-slider { margin-bottom: 70px; } .price-slider span { font-weight: 200; display: inline-block; color: #7f8c8d; font-size: 13px; } .form-pricing { background: #ffffff; padding: 20px; border-radius: 4px; } .price-form { background: #ffffff; margin-bottom: 10px; padding: 20px; border: 1px solid #eeeeee; border-radius: 4px; /*-moz-box-shadow: 0 5px 5px 0 #ccc; -webkit-box-shadow: 0 5px 5px 0 #ccc; box-shadow: 0 5px 5px 0 #ccc;*/ } .form-group { margin-bottom: 0; } .form-group span.price { font-weight: 200; display: inline-block; color: #7f8c8d; font-size: 14px; } .help-text { display: block; margin-top: -10px; margin-bottom: 10px; color: #737373; /*position: absolute;*/ /*margin-left: 20px;*/ font-weight: 200; /*text-align: right;*/ width: 188px; } .price-form label { font-weight: 200; font-size: 21px; } img.payment { display: block; margin-left: auto; margin-right: auto } .ui-slider-range-min { background: #2980b9; } .active-month, .active-term { background: #3276b1; } /* HR */ hr.style { margin-top: 0; border: 0; border-bottom: 1px dashed #ccc; background: #999; }
// JavaScript Document var ngCost = 1, gge = (1.136), avgMiles, avgMpg, dCost, ngCost; $(document).ready(function() { $("#total").val("10000"); $("#slider_mpy").slider({ range: "min", animate: true, min: 10000, max: 250000, step: 5000, value: 100000, slide: function(event, ui) { update("#slider_mpy",ui.value); //changed avgMiles = ui.value; calcualtePrice(ui.value); } }); $("#slider_mpg").slider({ range: "min", animate: true, min: 1, max: 15, step: .25, value: 7, slide: function(event, ui) { update("#slider_mpg",ui.value); //changed avgMpg = ui.value; calcualtePrice(ui.value); } }); $("#slider_diesel").slider({ range: "min", animate: true, min: 2.00, max: 5.00, step: .01, value: 4, slide: function(event, ui) { update("#slider_diesel",ui.value); //changed dCost = ui.value; calcualtePrice(ui.value); } }); $("#slider_natgas").slider({ range: "min", animate: true, min: 1.00, max: 5.00, step: .01, value: 1.75, slide: function(event, ui) { update("#slider_natgas",ui.value); //changed ngCost = ui.value; calcualtePrice(ui.value); } }); $('#slider_mpy a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$("#slider_mpy").slider("value")+' <span class="glyphicon glyphicon-chevron-right"></span></label>'); $('#slider_mpg a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$("#slider_mpg").slider("value")+' <span class="glyphicon glyphicon-chevron-right"></span></label>'); $('#slider_diesel a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$("#slider_diesel").slider("value")+' <span class="glyphicon glyphicon-chevron-right"></span></label>'); $('#slider_natgas a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$("#slider_natgas").slider("value")+' <span class="glyphicon glyphicon-chevron-right"></span></label>'); avgMiles = $("#slider_mpy").slider("value"); avgMpg = $("#slider_mpg").slider("value"); dCost = $("#slider_diesel").slider("value"); ngCost = $("#slider_natgas").slider("value"); calcualtePrice(); }); function update(slider,val) { if(undefined === val) val = "0"; $('#sliderVal').val(val); $('a', slider).html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+val+' <span class="glyphicon glyphicon-chevron-right"></span></label>'); } function calcualtePrice(val){ //alert(val + " " + $("#slider_natgas").slider("value")); var totalDieselConsumed = (avgMiles / avgMpg), totalDieselCost = ((avgMiles / avgMpg) * dCost), cneCostTotal = (totalDieselConsumed * (ngCost * gge)); if(undefined === val) val = $('#sliderVal').val(); $("#dieselGallons").val(totalDieselConsumed).formatCurrency({ symbol: '', roundToDecimalPlace: 0 }); $("#dieselCost").val(Math.round(totalDieselCost)).formatCurrency({ symbol: '$', roundToDecimalPlace: 0 }); $("#cngCost").val(Math.round(cneCostTotal)).formatCurrency({ symbol: '$', roundToDecimalPlace: 0 }); $("#savings").val(totalDieselCost - cneCostTotal).formatCurrency({ symbol: '$', roundToDecimalPlace: 0 }); } (function($){$.formatCurrency={};$.formatCurrency.regions=[];$.formatCurrency.regions[""]={symbol:"$",positiveFormat:"%s%n",negativeFormat:"(%s%n)",decimalSymbol:".",digitGroupSymbol:",",groupDigits:true}; $.fn.formatCurrency=function(destination,settings){if(arguments.length==1&&typeof destination!=="string"){settings=destination;destination=false }var defaults={name:"formatCurrency",colorize:false,region:"",global:true,roundToDecimalPlace:2,eventOnDecimalsEntered:false};defaults=$.extend(defaults,$.formatCurrency.regions[""]); settings=$.extend(defaults,settings);if(settings.region.length>0){settings=$.extend(settings,getRegionOrCulture(settings.region))}settings.regex=generateRegex(settings); return this.each(function(){$this=$(this);var num="0";num=$this[$this.is("input, select, textarea")?"val":"html"]();if(num.search("\\(")>=0){num="-"+num }if(num===""||(num==="-"&&settings.roundToDecimalPlace===-1)){return}if(isNaN(num)){num=num.replace(settings.regex,"");if(num===""||(num==="-"&&settings.roundToDecimalPlace===-1)){return }if(settings.decimalSymbol!="."){num=num.replace(settings.decimalSymbol,".")}if(isNaN(num)){num="0"}}var numParts=String(num).split(".");var isPositive=(num==Math.abs(num)); var hasDecimals=(numParts.length>1);var decimals=(hasDecimals?numParts[1].toString():"0");var originalDecimals=decimals;num=Math.abs(numParts[0]); num=isNaN(num)?0:num;if(settings.roundToDecimalPlace>=0){decimals=parseFloat("1."+decimals);decimals=decimals.toFixed(settings.roundToDecimalPlace); if(decimals.substring(0,1)=="2"){num=Number(num)+1}decimals=decimals.substring(2)}num=String(num);if(settings.groupDigits){for(var i=0;i<Math.floor((num.length-(1+i))/3); i++){num=num.substring(0,num.length-(4*i+3))+settings.digitGroupSymbol+num.substring(num.length-(4*i+3))}}if((hasDecimals&&settings.roundToDecimalPlace==-1)||settings.roundToDecimalPlace>0){num+=settings.decimalSymbol+decimals }var format=isPositive?settings.positiveFormat:settings.negativeFormat;var money=format.replace(/%s/g,settings.symbol);money=money.replace(/%n/g,num); var $destination=$([]);if(!destination){$destination=$this}else{$destination=$(destination)}$destination[$destination.is("input, select, textarea")?"val":"html"](money); if(hasDecimals&&settings.eventOnDecimalsEntered&&originalDecimals.length>settings.roundToDecimalPlace){$destination.trigger("decimalsEntered",originalDecimals) }if(settings.colorize){$destination.css("color",isPositive?"black":"red")}})};$.fn.toNumber=function(settings){var defaults=$.extend({name:"toNumber",region:"",global:true},$.formatCurrency.regions[""]); settings=jQuery.extend(defaults,settings);if(settings.region.length>0){settings=$.extend(settings,getRegionOrCulture(settings.region))}settings.regex=generateRegex(settings); return this.each(function(){var method=$(this).is("input, select, textarea")?"val":"html";$(this)[method]($(this)[method]().replace("(","(-").replace(settings.regex,"")) })};$.fn.asNumber=function(settings){var defaults=$.extend({name:"asNumber",region:"",parse:true,parseType:"Float",global:true},$.formatCurrency.regions[""]); settings=jQuery.extend(defaults,settings);if(settings.region.length>0){settings=$.extend(settings,getRegionOrCulture(settings.region))}settings.regex=generateRegex(settings); settings.parseType=validateParseType(settings.parseType);var method=$(this).is("input, select, textarea")?"val":"html";var num=$(this)[method](); num=num?num:"";num=num.replace("(","(-");num=num.replace(settings.regex,"");if(!settings.parse){return num}if(num.length==0){num="0"}if(settings.decimalSymbol!="."){num=num.replace(settings.decimalSymbol,".") }return window["parse"+settings.parseType](num)};function getRegionOrCulture(region){var regionInfo=$.formatCurrency.regions[region];if(regionInfo){return regionInfo }else{if(/(\w+)-(\w+)/g.test(region)){var culture=region.replace(/(\w+)-(\w+)/g,"$1");return $.formatCurrency.regions[culture]}}return null}function validateParseType(parseType){switch(parseType.toLowerCase()){case"int":return"Int"; case"float":return"Float";default:throw"invalid parseType"}}function generateRegex(settings){if(settings.symbol===""){return new RegExp("[^\\d"+settings.decimalSymbol+"-]","g") }else{var symbol=settings.symbol.replace("$","\\$").replace(".","\\.");return new RegExp(symbol+"|[^\\d"+settings.decimalSymbol+"-]","g")}}})(jQuery);

Related: See More


Questions / Comments: