Windows 8 focusing on interactive touch - we smell a gimmick #keepitsimplestupid.

Author

Sean Brennan

Sean is a specialist front-end developer & Joomla enthusiat who loves to dabble in PHP & Graphics

Share

Interactive jQuery price slider calculator

soc 2

Speaking of code, have you ever wanted to give your users a more accurate estimate on prices for your services? I know many freelance web developers who often pondered the best way to get a price estimate across to prospective clienst. And as we know with web development, set prices will never do the trick.

So in this article, we will look at some of the better options for achieving this effect. It will involve the following:

  • jQuery minimum package (jquery-1.6.2.min.js)
  • jQuery UI (jquery-ui.js)
  • jQuery UI CSS (jquery-ui.css)
  • Come CSS action (global.css)
  • Some Custom JS (myscript.js)

So the first thing you need to do is to get your HTML code in order. This is done by creating a form with labels, disabled input boxes and some slider 'div' markup. Eash slide calculator item will contain:

1 x Slider div
2 x Labels
2 x Disabled Inputs

All these elements will have the own ID tags which are important, and obviously to pass the information on when you set up you form emailer, one of the inputs will requre a name (this will be the one that displays the prices).

The HTML

First of all, we need to attach our stylesheets and jQuery plugin scripts into the document.

Then you need to construct your form as outlined above. Naming conventions up up to you here but the supplied files and code certainly works fine. If you change the names, classes and ID tags here, be sure to do the same in the CSS files and the JS files.

The basic slider item structure is as follows. You can look at the full form in the demo or the download.







The CSS will need some tweaking to get it looking the way you would like it to. You will need to add some styles to your origainal master stylesheet, and you will also need to edit the jQuery-ui.css aswell. This is to get the sliders styled.

The CSS (global.css)

The JavaScript / jQuery

Now for the tricky part. The JavaScript will certainly take some tinkering to get right. There are a few settings which will need to match up with each other.

First you will need to call the function to get cracking when the page is ready

$(document).ready( function() {

Next you will need to put all your initial input values to a value. In this case we are indicating what the values of the slider are referring to with questions about the values in the slider. Change these to your starting values.

$("#total").val("0");
$("#amount").val("Type?");
$("#amountb").val("Pages?");
$("#amountc").val("Time?");
$("#amountd").val("Extras?");

Now it gets a bit more complex. Each slider will require values to go with it. So create some variables with values for the slider. So for the first slider, in this case "Type", the values are as follows.

 var p = {
            0: "None",
            1: "PSD to HTML",
            2: "Brochure Website",
            3: "Device Optimised",
            4: "CMS",
            5: "eCommerce",
            6: "Custom Application",

        };

You will need to do this for all of the slider elements. Next you will need to add the following code for each slider so that the JavaScript knows whats going on.

$("#slider").slider({

            value: "0",
            min: 0,
            max: 6,
            step: 1,
            slide: function(event, ui) {

                $("#price").val(t[ui.value]);
                $("#amount").val(p[ui.value]);
                var aaa = $("#price").val();
                var bbb = $("#priceb").val();
                var ccc = $("#pricec").val();
                var ddd = $("#priced").val();
                var eee = $("#pricee").val();
                var fff = $("#pricef").val();
                $("#total").val(+aaa + +bbb + +ccc + +ddd);
            }
        });

 

This part at the bottom is responsible for the addition and dynamic display of the price that is currently showing.
 $("#total").val(+aaa + +bbb + +ccc + +ddd);

That is pretty much it. To make life easier we have provided a demo and a download package so you can plug it into your site and tinker.

The main errors people make will be with the not matching up of the values to the element Javascript declaration. To be clear, this is where the "max: 6" does not equal the amount of values you have entered into the variable string.

Sorry the demo is thrown together so roughly, and some non required elements can be trimmed out of it aswell such as the '$' sign additions to the total values, but I've left it in there for you to play with :-)









Sponsored Links

Subscribe

Twitter

#iPhone #Siri battery life reportedly less than iPhone4. Will #Apple release new phone with it's #iPad 3 launch? Find out this March.

#Webdevelopers presenting to potential clients- how do you present? #Projector? #iPad? #Laptop? #Tablet? We recommend the #projector for now

#iPad3 from #Apple and #tech rumours of a possible A3 or #23inch #tablet to hit shelves in 2012. #jQuery #HTML #CSS #samsung #iPhone

#Samsung #galaxy #tablet flash capabilities reportedly running down battery life. #Jquery & #HTML5 still the preferred choice by #developers

#4G #iPad3 rumors in overdrive... tipping a March #release. Find out about the anticipated #new #features in our upcoming #blog


Recommendations