Creating Slider Through jQuery
<p>I have a code to create slider in HTML web page using JQUERY but its not working please help me following is the code for that. I have checked all the JS paths that are also proper. I have separated sliders code  to check and its worked but its not working when i will integrate that in following code.</p>

<pre><code>    &lt;html&gt;                                                                  
 &lt;head&gt;  
&lt;meta charset="utf-8"&gt;

     &lt;link href="tms_style.css" type="text/css" rel="stylesheet"&gt;
     &lt;link rel="stylesheet" href="css/jquery.ui.all.css"&gt;    
     &lt;link rel="stylesheet" href="style.css" type="text/css" media="screen" /&gt;                                                        

     &lt;script type="text/javascript" src="/jquery.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="../script.js"&gt;&lt;/script&gt;  





    &lt;script src="js/jquery.ui.mouse.js"&gt;&lt;/script&gt;
    &lt;script src="js/jquery.ui.slider.js"&gt;&lt;/script&gt; 

   &lt;script src="js/jquery-1.7.1.js"&gt;&lt;/script&gt;
    &lt;script src="js/jquery.ui.core.js"&gt;&lt;/script&gt;
     &lt;script src="js/jquery.ui.widget.js"&gt;&lt;/script&gt;
     &lt;script src="js/jquery.ui.datepicker.js"&gt;&lt;/script&gt;



     &lt;link rel="stylesheet" href="js_includes/development-bundle/themes/base/jquery.ui.all.css"&gt;

    &lt;link rel="stylesheet" href="js_includes/development-bundle/demos/demos.css"&gt;


    &lt;script src="js_includes/development-bundle/ui/jquery.ui.position.js"&gt;&lt;/script&gt;
    &lt;script src="js_includes/development-bundle/ui/jquery.ui.autocomplete.js"&gt;&lt;/script&gt;



    &lt;style&gt;
    #demo-frame &gt; div.demo { padding: 10px !important; };
    &lt;/style&gt;

    &lt;style&gt;
    .ui-autocomplete-loading { background: white url('js_includes/development-bundle/demos/autocomplete/images/ui-anim_basic_16x16.gif') right center no-repeat; }
    &lt;/style&gt;

    &lt;script&gt;
    $(function() {

        $("#slider-range").slider({

            range: true,
            min: 0,
            max: 16000,
            values: [2000, 9000],
            slide: function(event, ui) {
                $("#amountMin").val(ui.values[0]);
                $("#amountMax").val(ui.values[1]);
            }
        });

        $("#amountMin").val($("#slider-range").slider("values", 0));
        $("#amountMax").val($("#slider-range").slider("values", 1));
    });
    &lt;/script&gt;


    &lt;script&gt;


        $(function() {



        function log( message ) {
            $( "&lt;div/&gt;" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $.ajax({
            url: "AllResponse.xml",
            dataType: "xml",
            success: function( xmlResponse ) {
                var data = $( "Hotel", xmlResponse ).map(function() {
                    return {
                        value: $( "CityCode", this ).text() + ", " +
                            ( $.trim( $( "CityName", this ).text() ) || "(unknown country)" ),
                        id: $( "CityCode", this ).text()
                    };
                }).get();
                $( "#txtCity" ).autocomplete({
                    source: data,
                    minLength: 2,
                    select: function( event, ui ) {
                        log( ui.item ?
                            "Selected: " + ui.item.value + ", CityCode: " + ui.item.id :
                            "Nothing selected, input was " + this.value );
                    }
                });
            }
        });
    });
    &lt;/script&gt;







     &lt;script&gt;

    $(function() {
        $( "#datepicker1" ).datepicker({
            numberOfMonths: 2,
            showButtonPanel: true


        });
    });
    &lt;/script&gt;
     &lt;script&gt;
    $(function() {
        $( "#datepicker2" ).datepicker({
            numberOfMonths: 2,
            showButtonPanel: true
        });
    });
    &lt;/script&gt;



&lt;div style="display: none;" class="demo-description"&gt;
&lt;p&gt;The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.&lt;/p&gt;
&lt;/div&gt;



 &lt;script type="text/javascript"&gt;



     $(document).ready(function() {
         $.ajax({
             type: "GET",
             url: "AllResponse.xml",
             dataType: "xml",
             success: parseXml
         });




         function parseXml(document) {

             cnt = 1;
             var count = $(document).find("Hotel").each(function() {

             }).length;

          var Hotel = $(document).find("Hotel")
             Hotel.sort(function(a, b) {
             return (parseInt($(a).find('Property').attr('MinimumRate')) - parseInt($(b).find('Property').attr('MinimumRate')));
         });

         Hotel.each(function(i, v) {

         var title = $(v).find('OptionNo').text()
         var start = $(v).find('StayDateRange').attr('Start')
         var end = $(v).find('StayDateRange').attr('End')
         var Hotelname = $(v).find('Property').attr('HotelName')
         var CityName = $(v).find('CityName').text()
         var Address1 = $(v).find('Address1').text()
         var Address2 = $(v).find('Address2').text()
         var hotelimage = $(v).find('HotelFrontImage').attr('Url')
         var MinRate = $(v).find('Property').attr('MinimumRate')
         var Currency = $(v).find('Property').attr('Currency')


         var NumberOfRooms = $(v).find('ManagementFeesDetails').text()
         var NumberOfRooms1 = $(v).find('Rooms').find('Room').attr('NumberOfRooms')

         var fullLink = '&lt;div id="Hotel_details"&gt; &lt;div id="discounts_and_offers"&gt;Book 3 Days In Advance  And Get 15% Discount&lt;/div&gt; &lt;div id="hotel_image"&gt;&lt;img src="' + hotelimage + '"/&gt;&lt;/div&gt; &lt;div id="hotel_view"&gt;&lt;table height="100%" width="100%" cellpadding="0" cellspacing="0" &gt;&lt;tr&gt;&lt;td height="89" &gt;&lt;div id="discount_rate"&gt;INR 8,325&lt;/div&gt;&lt;div id="room_rate"&gt;' + Currency + ' ' + MinRate + '&lt;/div&gt; Lowest room price &lt;br /&gt;per night &lt;/td&gt;&lt;tr&gt;&lt;td height="39" &gt;&lt;img src="images/view_room.png" width="115" height="36"  /&gt;&lt;/td&gt; &lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;div id="middle_div"&gt;&lt;table width="100%" cellpadding="0" cellspacing="0" &gt;&lt;tr&gt;&lt;td height="94"&gt;&lt;div id="hotel_information"&gt;&lt;div id="hotel_header"&gt;' + Hotelname + '-' + CityName + '&lt;/div&gt;&lt;div id="hotel_star_rating"&gt;&lt;img src="images/star_rating.png" width="73" height="19" /&gt;&lt;/div&gt;&lt;div id="hotel_info"&gt;' + Address1 + '&lt;br&gt;' + Address2 + '&lt;/div&gt;&lt;/div&gt;&lt;div id="hotel_inclusions"&gt;&lt;img src="images/inclusion1.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion2.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion3.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion4.jpg" width="17" height="16" /&gt;&lt;br /&gt;&lt;img src="images/inclusion5.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion6.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion7.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion8.jpg" width="17" height="16" /&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td height="27"&gt;&lt;div id="hotel_links"&gt;&lt;ul&gt;&lt;li&gt;Details&lt;/li&gt;&lt;li&gt;|&lt;/li&gt;&lt;li&gt;Photos&lt;/li&gt;&lt;li&gt;|&lt;/li&gt;&lt;li&gt;Map&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;' + NumberOfRooms1 + '&lt;/div&gt;';

         $("#content").append(fullLink);
         cnt = cnt + 1;
         //alert("Option is: " + $(v).find('OptionNo').text() + " Minimum Rate is " + $(v).find('Property').attr('MinimumRate') + " Call is " + $(v).find('Property').attr("Currency"));

         });
             paging(count);

         }

     });

function paging(count1) {
    var show_per_page = 8;
    var number_of_items = count1;
    var number_of_pages = Math.ceil(number_of_items / show_per_page);
    var current_link = 0;
    $('#current_page').val(0);
    $('#show_per_page').val(show_per_page);
    $("&lt;a href='#'&gt;Prev&amp;nbsp;&amp;nbsp;&lt;/a&gt;").click(previous).appendTo("#page_navigation");
    while (number_of_pages &gt; current_link) {
        $("&lt;a href='#' class='page_link'&gt;").text(++current_link + '  ').click(go_to_page).appendTo("#page_navigation")
    }
    $("&lt;a href='#'&gt;&amp;nbsp;&amp;nbsp;Next&lt;/a&gt;&amp;nbsp;&amp;nbsp;").click(next).appendTo("#page_navigation");
    $('#page_navigation .page_link:first').addClass('active_page');
    $('#content').children().hide().slice(0, show_per_page).show();

    function previous(e) {
        e.preventDefault(); //Don't follow the link
        $(".active_page").prev(".page_link").click();
    }

    function next(e) {
        e.preventDefault();
        $(".active_page").next(".page_link").click();
    }

    function go_to_page(e) {
        e.preventDefault();

        //Get the zero-based index instead of using an attribute
        var page_num = $(this).index(".page_link");

        //get the number of items shown per page
        var show_per_page = parseInt($('#show_per_page').val());

        //get the element number where to start the slice from
        start_from = page_num * show_per_page;

        //get the element number where to end the slice
        end_on = start_from + show_per_page;

        //hide all children elements of content div, get specific items and show them
        $('#content').children().hide().slice(start_from, end_on).show();

        //Since this always points to the page link, use that instead of looking for it
        $(this).addClass("active_page").siblings(".active_page").removeClass("active_page");
    }
}

function getXml() {


    var city=document.getElementById("txtCity").value;
    var checkin=document.getElementById("datepicker1").value;
    var checkout=document.getElementById("datepicker2").value;
    var sortBy = $("#sortBy").val();



    $.ajax({
        type: "GET",
        url: "AllResponse.xml",
        dataType: "xml",
        success: parseXml2
    });




    function parseXml2(document) {


        $("#content").text("");
        $("#page_navigation").text("");
        cnt = 0;
        var count = $(document).find("Hotel").each(function() {

    }).length;
    if (sortBy == 1) {
        var Hotel = $(document).find("Hotel")
        Hotel.sort(function(a, b) {
            return (parseInt($(a).find('Property').attr('MinimumRate')) - parseInt($(b).find('Property').attr('MinimumRate')));
        });
    }
    else {
        var Hotel = $(document).find("Hotel")
        Hotel.sort(function(a, b) {
            return (parseInt($(b).find('Property').attr('MinimumRate')) - parseInt($(a).find('Property').attr('MinimumRate')));
        });
    }

    Hotel.each(function(i, v) {

        // Criteria Find For Only Hotels 
        var title = $(v).find('OptionNo').text()
        var start = $(v).find('StayDateRange').attr('Start')
        var end = $(v).find('StayDateRange').attr('End')
        var Hotelname = $(v).find('Property').attr('HotelName')
        var CityName = $(v).find('CityName').text()
        var Address1 = $(v).find('Address1').text()
        var Address2 = $(v).find('Address2').text()
        var hotelimage = $(v).find('HotelFrontImage').attr('Url')
        var MinRate = $(v).find('Property').attr('MinimumRate')
        var Currency = $(v).find('Property').attr('Currency')


        var NumberOfRooms = $(v).find('ManagementFeesDetails').text()
        var NumberOfRooms1 = $(v).find('Rooms').find('Room').attr('NumberOfRooms')

        //**************************************************************

        // Criteria Find For Hotel Rooms

        if (CityName == city.toUpperCase() &amp;&amp; start &gt;= checkin &amp;&amp; end &lt;= checkout) {
            cnt = cnt + 1;

            var fullLink = '&lt;div id="Hotel_details"&gt; &lt;div id="discounts_and_offers"&gt;Book 3 Days In Advance  And Get 15% Discount&lt;/div&gt; &lt;div id="hotel_image"&gt;&lt;img src="' + hotelimage + '" /&gt;&lt;/div&gt; &lt;div id="hotel_view"&gt;&lt;table height="100%" width="100%" cellpadding="0" cellspacing="0" &gt;&lt;tr&gt;&lt;td height="89" &gt;&lt;div id="discount_rate"&gt;INR 8,325&lt;/div&gt;&lt;div id="room_rate"&gt;' + Currency + ' ' + MinRate + '&lt;/div&gt; Lowest room price &lt;br /&gt;per night &lt;/td&gt;&lt;tr&gt;&lt;td height="39" &gt;&lt;img src="images/view_room.png" width="115" height="36"  /&gt;&lt;/td&gt; &lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;div id="middle_div"&gt;&lt;table width="100%" cellpadding="0" cellspacing="0" &gt;&lt;tr&gt;&lt;td height="94"&gt;&lt;div id="hotel_information"&gt;&lt;div id="hotel_header"&gt;' + Hotelname + '-' + CityName + '&lt;/div&gt;&lt;div id="hotel_star_rating"&gt;&lt;img src="images/star_rating.png" width="73" height="19" /&gt;&lt;/div&gt;&lt;div id="hotel_info"&gt;' + Address1 + '&lt;br&gt;' + Address2 + '&lt;/div&gt;&lt;/div&gt;&lt;div id="hotel_inclusions"&gt;&lt;img src="images/inclusion1.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion2.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion3.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion4.jpg" width="17" height="16" /&gt;&lt;br /&gt;&lt;img src="images/inclusion5.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion6.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion7.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion8.jpg" width="17" height="16" /&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td height="27"&gt;&lt;div id="hotel_links"&gt;&lt;ul&gt;&lt;li&gt;Details&lt;/li&gt;&lt;li&gt;|&lt;/li&gt;&lt;li&gt;Photos&lt;/li&gt;&lt;li&gt;|&lt;/li&gt;&lt;li&gt;Map&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;';

            $("#content").append(fullLink);

        }
        else if (city == "" || checkin == "" || checkout == "") {
            cnt = cnt + 1;

            var fullLink = '&lt;div id="Hotel_details"&gt; &lt;div id="discounts_and_offers"&gt;Book 3 Days In Advance  And Get 15% Discount&lt;/div&gt; &lt;div id="hotel_image"&gt;&lt;img src="' + hotelimage + '" /&gt;&lt;/div&gt; &lt;div id="hotel_view"&gt;&lt;table height="100%" width="100%" cellpadding="0" cellspacing="0" &gt;&lt;tr&gt;&lt;td height="89" &gt;&lt;div id="discount_rate"&gt;INR 8,325&lt;/div&gt;&lt;div id="room_rate"&gt;' + Currency + ' ' + MinRate + '&lt;/div&gt; Lowest room price &lt;br /&gt;per night &lt;/td&gt;&lt;tr&gt;&lt;td height="39" &gt;&lt;img src="images/view_room.png" width="115" height="36"  /&gt;&lt;/td&gt; &lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;div id="middle_div"&gt;&lt;table width="100%" cellpadding="0" cellspacing="0" &gt;&lt;tr&gt;&lt;td height="94"&gt;&lt;div id="hotel_information"&gt;&lt;div id="hotel_header"&gt;' + Hotelname + '-' + CityName + '&lt;/div&gt;&lt;div id="hotel_star_rating"&gt;&lt;img src="images/star_rating.png" width="73" height="19" /&gt;&lt;/div&gt;&lt;div id="hotel_info"&gt;' + Address1 + '&lt;br&gt;' + Address2 + '&lt;/div&gt;&lt;/div&gt;&lt;div id="hotel_inclusions"&gt;&lt;img src="images/inclusion1.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion2.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion3.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion4.jpg" width="17" height="16" /&gt;&lt;br /&gt;&lt;img src="images/inclusion5.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion6.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion7.jpg" width="17" height="16" /&gt;&lt;img src="images/inclusion8.jpg" width="17" height="16" /&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td height="27"&gt;&lt;div id="hotel_links"&gt;&lt;ul&gt;&lt;li&gt;Details&lt;/li&gt;&lt;li&gt;|&lt;/li&gt;&lt;li&gt;Photos&lt;/li&gt;&lt;li&gt;|&lt;/li&gt;&lt;li&gt;Map&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;';

            $("#content").append(fullLink);

        }
    });


        //alert(cnt);
        paging(cnt);
    }

}



 &lt;/script&gt;                                                               
 &lt;/head&gt;                                                                 
 &lt;body&gt;  

 &lt;div class="demo"&gt;
&lt;div id="sarchBox"&gt;
&lt;form name="frmSearch" id="frmSearch" method="post"&gt;

    &lt;label for="txtCity"&gt;City : &lt;/label&gt;
    &lt;input id="txtCity" type="text" /&gt;


Check-In: &lt;input type="text" id="datepicker1"&gt;


Check-Out: &lt;input type="text" id="datepicker2"&gt;



&lt;input type="button" id="search" value="search" onClick="getXml();" /&gt;
&lt;/form&gt;
&lt;/div&gt;




&lt;input type="hidden" id="current_page" /&gt;
&lt;input type="hidden" id="show_per_page" /&gt;
&lt;div&gt;Sort By Price: &lt;select id="sortBy" onChange="getXml();"&gt;
&lt;option value="1" &gt;Low To Heigh&lt;/option&gt;
&lt;option value="2"&gt;Heigh To Low&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;

&lt;b style="font-size:medium;"&gt;Price Range:&lt;/b&gt;&lt;br&gt;

&lt;div id="slider-range"&gt;&lt;/div&gt;

    &lt;b  style="font-size:small;"&gt;Rs:&lt;/b&gt;
    &lt;input type="text" id="amountMin" size="19" readonly="readonly" style="font-size:small; border:0; color:#f6931f; background-color:#DEDEDE; font-weight:bold;" /&gt;
    &lt;b  style="font-size:small;"&gt;Rs:&lt;/b&gt;
    &lt;input type="text" id="amountMax" size="4" readonly="readonly" style="font-size:small; border:0; color:#f6931f; font-weight:bold; background-color:#DEDEDE;" /&gt;

&lt;/div&gt;


&lt;ul id="content"&gt;&lt;/ul&gt;



 &lt;div id="page_navigation" &gt;&lt;/div&gt;


&lt;/body&gt;                                                                 
&lt;/html&gt;
</code></pre>

<p>Following is the code for slider from above</p>

<pre><code>&lt;script&gt;
        $(function() {

            $("#slider-range").slider({

                range: true,
                min: 0,
                max: 16000,
                values: [2000, 9000],
                slide: function(event, ui) {
                    $("#amountMin").val(ui.values[0]);
                    $("#amountMax").val(ui.values[1]);
                }
            });

            $("#amountMin").val($("#slider-range").slider("values", 0));
            $("#amountMax").val($("#slider-range").slider("values", 1));
        });
        &lt;/script&gt;
</code></pre>
