{"id":859,"date":"2013-02-11T07:54:29","date_gmt":"2013-02-11T07:54:29","guid":{"rendered":"http:\/\/www.osd.net\/blog\/?p=859"},"modified":"2013-02-11T09:45:23","modified_gmt":"2013-02-11T09:45:23","slug":"dynamic-jquery-slider-search","status":"publish","type":"post","link":"https:\/\/www.osd.net\/blog\/web-development\/php\/dynamic-jquery-slider-search\/","title":{"rendered":"Dynamic jQuery Slider search"},"content":{"rendered":"

In this article, I will show you how to make a search within intervals using AJAX <\/strong>and jQuery Slider<\/a>. I will use for example purpose a search between a minimum and a maximum price of some estates that will look like the one you can see in these images:<\/p>\n

\"jQuery<\/a>
\n\"jQuery<\/a><\/p>\n

We will use a HTML <\/strong>file, a Javascript <\/strong>file and a PHP <\/strong>file requested with AJAX<\/strong>, just as in the previous article, \u00a0“Dynamic jQuery Datepicker calendar<\/a>”<\/p>\n

1. The html<\/strong> file
\nIn this file you have to add the link to the jQuery libraries and the stylesheets.<\/p>\n

\r\n<!-- stylesheets -->\r\n<link href="http:\/\/code.jquery.com\/ui\/1.9.1\/themes\/base\/jquery-ui.css" rel="stylesheet" \/>\r\n\r\n<!-- js files -->\r\n<script type="text\/javascript" src="http:\/\/code.jquery.com\/jquery-1.8.2.js"><\/script><script type="text\/javascript" src="http:\/\/code.jquery.com\/ui\/1.9.1\/jquery-ui.js"><\/script>\r\n\r\n<script type="text\/javascript" src="script.js"><\/script>\r\n<\/pre>\n
With the libraries and the stylesheet included, we’ll need a div tag for the slider (“slider_price”), 2 span tags for minimum price (“app_min_price”) and maximum price (“app_max_price”) and a span tag for the total number of estates found within the selected interval of prices (“number_results”):<\/p>\n
\r\n<span id="app_min_price"><\/span>\r\n<span id="app_max_price"><\/span><\/pre>\r\n<div id="slider_price"><\/div>\r\n<pre><span id="number_results"><\/span> results found.\r\n<\/pre>\n
2. The javascript<\/strong> file
\nYou can also put this code in the html file between the “<script>” tags. This script<\/strong> will have 2 parts:<\/p>\n