Hi,

I am attempting to create a Visualforce page that contains a jQuery slider that will be used in a section on my account page. I uploaded the jquery zip file to the Statc Resources section and created a Visualforce page with the following code. The input fields show up not the slider does not and I can't seem to determine what I am missing. Any help would be greatly apreciated.

<apex:page standardController="Account" id="page" cache="false">
 
    <!-- Here we incldued the necessary jquery javascript and css files -->
    <script type='text/javascript' src="{!URLFOR($Resource.jquery, 'js/jquery-1.5.1.min.js')}"></script>
    <script type='text/javascript' src="{!URLFOR($Resource.jquery, 'js/jquery-ui-1.8.13.custom.min.js')}"></script>
    <link rel='stylesheet' type='text/css' href="{!URLFOR($Resource.jquery, 'css/ui-lightness/jquery-ui-1.8.13.custom.css')}" />

 
    <script type="text/javascript">
        var j$ = jQuery.noConflict();    
        //This will load as soon as the page is ready and will setup our slider
        j$(document).ready(function(){
            $("#slider-range").slider({ //This line creates a slider on the DIV specified, options are passed arguments, comma separated below
                range: true, //This give the slider and top and bottom
                min: 0, //Min value for slider
                max: 24, //Max value for slider
                step: .5, //Increment
                values: [0,0], //Start values for the slider
                slide: function(event, ui){ //This function executes every time slider is moved and applies the slider values to the input fields as well as the output below the slider
                    document.getElementById('{!$Component.page.form.block.values.MonOpen}').value = ui.values[0];
                    document.getElementById('{!$Component.page.form.block.values.MonClose}').value = ui.values[1];
                    $("#amount").val(ui.values[0] + ' - ' + ui.values[1]);
                }
            });
 
            //This line executes only once right after the page is loaded and after the slider is initialized. It creates the "0 - 24" text on load
            $("#amount").val(("#slider-range").slider("values", 0) + ' - ' + ("#slider-range").slider("values", 1));
        });
    </script>
 
    <apex:form id="form">
        <apex:pageBlock mode="edit" id="block">
            <apex:pageBlockButtons >
                <apex:commandButton value="Save" action="{!save}" />
            </apex:pageBlockButtons>
 
            <apex:pageBlockSection >
                <apex:outputField value="{!Account.Name}"/>
            </apex:pageBlockSection>
 
            <apex:pageBlockSection title="Business Hours" columns="2">
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Business Hours"/>
                    <apex:pageBlockSectionItem >
                        <!-- This is where our slider will be -->
                        <div id="slider-range" style="font-size: 90%; margin-top: 0.5em;"></div>
                        <div id="amount" style="text-align: center;"></div>
                    </apex:pageBlockSectionItem>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
 
            <apex:pageBlockSection columns="1" id="values">
                <!-- You could make these fields apex:inputHidden and then use only the slider -->
                <apex:inputField value="{!Account.Monday_Open_Time__c}" id="MonOpen" />       
                <apex:inputField value="{!Account.Monday_Close_Time__c}" id="MonClose"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
 
</apex:page>