jQuery Sliders (Ajax equivalent)

Hi, 

As this being my first blog, I’ll begin with something simple and easy.  I’m currently doing my IT Bachelors internship in Belgium and well, I’m enjoying it!  But lets start with the blog. 

Recently my boss gave me a project where users must be able to search for houses/apartments in the Belgium area for buying or renting.  So we continued the idea by using something like Google maps but in the end ended up using Microsoft’s Bing maps.  

At first AJAX sliders was used but found that we couldn’t really make them do what we want (in respect to how the project must be built).  So I decided to see if there was an alternative and found this amazing jQuery slider plugin. (The original post can be found here: http://plugins.jquery.com/project/jslider-safari or http://blog.egorkhmelev.com/2010/03/jquery-slider-update/comment-page-1/#comment-935) 

This is just what I wanted.  The style and everything was perfect and fitted with the projects theme instantly.  As I worked with the sliders there arose some problems here and there but in the end I finally got it to work perfectly.  In this blog I would just like to show you how I achieved to dynamically set the sliders (values, scales etc…) as this was one of my major issues.  

First of all you need to include all the files (.js and styles) that can be found here.  The code, this is inside my .aspx page: 

<div class=”layout”>
<div class=”layout-slider” style=”width: 100%”>
<span style=”display: block; width: 350px; padding: 6px 0px 0px 2px;“><input id=”Pricing” type=”slider” name=”price” value=”0;500000″ /></span> </div>
</div>
<div style=”padding-top:8px”></div> 

 

Yes as simple as that.  I also have a seperate javascript file in which I initiate & set the slider’s values according to some criteria like the following:

  

var jQ = jQuery.noConflict();
//These vals are just to set the min and max of the sliders
var pslidStart = “get this val from database”;
var pslidEnd = “get this val from database”;
//These vals are to set where the handles of the sliders must be
var sPrMin = “get this val from database”;
var sPrMax = “get this val from database”;  

//This initiates the above slider
jQ(document).ready( function() {
if (destID == 1) {
jQ(“#Pricing”).slider( {  from: pslidStart, to: pslidEnd, scale: [0, ‘|’, 100000, ‘|’, 200000, ‘|’, 300000, ‘|’, 400000, ‘|’, 500000], step: 25000, smooth: false, round: 0, dimension: “&nbsp;€”, skin: “plastic”, limits: false  } );
}
else if (destID == 2) {
jQ(“#Pricing”).slider( {  from: pslidStart, to: pslidEnd, scale: [200, ‘|’, 400, ‘|’, 600, ‘|’, 800, ‘|’, 1000, ‘|’, 1200, ‘|’, 1400, ‘|’, 1600, ‘|’, 1800, ‘|’, 2000, ‘|’, 2200, ‘|’, 2400, ‘|’, 2600], step: 100, smooth: false, round: 0, dimension: “&nbsp;€”, skin: “plastic”, limits: false  }) ;
}  

//This set the slider values (*Note this is a multi-handle slider)
jQ(“#Pricing”).slider(“value”, sPrMin, sPrMax);

 

NOTE: Please refer to the original documentation for further help if needed. (Also the site this is implemented in is not up and running yet so please feel free to come back for an update later.)

 

Here is a screen shot of the slider(s):

SliderExample

———–
aQuila22