$("#slider_range").slider is not a function

Question

Ok, I have included the google api libraries for Jquery UI, like so:

<script type='text/javascript'  src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js' ></script>

Now I have a script that updates some spans and a hidden input on document slide and not only, on document ready:

<script type="text/javascript">
            $(document).ready(function()
            {
                 var slider=$('#slider_range').slider({
                        range:true,
                        min:0,
                        max:5,
                        step:1,
                        values:[0,3],
                        slide:function(event,ui)
                        {
                          $('#level').val(ui.values[0]+'-'+ui.values[1]);
                          $('#low').html(ui.values[0]);
                          $('#high').html(ui.values[1]);
                        }
                 });

                 var s=slider;
                 if(s.slider("values",0)==s.slider("values",1))
                 {
                    $('#level').val(s.slider("values",0));
                    $('#low').html(s.slider("values",0));
                    $('#high').html(s.slider("values",0));
                 }
                 else
                     {
                       $('#level').val(s.slider("values",0)+'-'+s.slider("values",1));
                       $('#low').html(s.slider("values",0));
                       $('#high').html(s.slider("values",1));
                     }
              });
         </script>

The ideea is that on a page it shows the slider and on another not. The error message I get from Firebug is this:

$("#slider_range").slider is not a function

And points to the line

slide:function(event,ui)

What could be causing this? Why on a page the slider can be seen and on another (which uses the same template that loads the above) can`t?

Please help!

Feudalism

is jquery-ui.js also included on the other page on which it is not being shown – Esplanade

@3nigma Yes, the second page loads the same template. No difference what so ever. – Feudalism

stupid question but did you includ jquery library too ? – Egestion

:) Can you make an example on jsfiddle.net ? – Egestion

@Egestion Don`t have time for that, the thing is whatever I do it says $("#slider_range").slider is not a function – Feudalism

@Feudalism if you want some help take 5 min of your time to make an example :) – Egestion

did you include jquery.js BEFORE jquery-ui.js? – Kafir

Reqired JS for slider.jquery-1.6.2.js, jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.slider.js – Tiresome

Answer 1

There were two differing jquery libraries included on the second page.

Feudalism

If this is the solution you should accept this answer. Click the checkmark next to your answer :) – Upstroke

Answer 2

I just had the same error while i used the foundation framework from zurb along with jquery ui slider.

Problem #1: the foundation framework 3.2.4 already delivers jquery 1.8.1 and i tried to include my own copy of jquery 1.9 just before the foundation files. (= duplicate jquery inclusion)

Problem #2: the order of my inclusions. jquery ui needs to be included AFTER the foundation framework files.

Mig