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!
There were two differing jquery libraries included on the second page.