jQuery slider is unknown

Question

How does this slider work?

source given shows up nothing

<style>
    #demo-frame > div.demo { padding: 10px !important; }
</style>
<script>
    $(function() {
        $( "#slider" ).slider();
    });
</script>
<div class="demo">
    <div id="slider"></div>
</div><!-- End demo -->

I did include jquery before adding this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

but it gives me

SCRIPT438: Object doesn't support property or method 'slider'

error.

This is what entire code looks like

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <style>
            #demo-frame > div.demo { padding: 10px !important; }
        </style>

        <div class="demo">
            <div id="slider"></div>
        </div><!-- End demo -->

        <script>
        $(function() {
            $( "#slider" ).slider();
            });
        </script>
    </body>
</html>

What am I missing?

I've found your problem, checkout my updated answer. – gdoron Feb 06 '12 at 08:11 — gdoron, Feb 06 '12 at 08:11

gdoron · Accepted Answer · 2012-02-06T08:10:49.260

2

I did include jquery before adding this

You did include jQuery... but you are using jQuery ui plugin method- .slider() without referencing the ui plugin.
So that method slider is unknown to javascript,

Add the reference after the jQuery library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Update:

After too much time spent, I've found your problem, you're missing the JQuery ui css:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

JSFiddle DEMO

edited Feb 06 '12 at 08:10

answered Feb 05 '12 at 23:31

gdoron

147,333
58
291
367

@Sparky672 (in reply to your now deleted comment) okay... this seems more involved than I thought. It said nowhere in http://jqueryui.com/demos/slider/ that I need images: "The jQuery UI Slider plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures." If I need extra images where do I get those? Or do I have to make my own? – Nitin Feb 06 '12 at 00:22
@Nitin, I deleted my last comment because I thought you were trying to construct an image/content slider. It's an overlap in terminology and it's my fault for not looking closer. Disregard. – Sparky Feb 06 '12 at 00:30

score 1 · Answer 2 · answered Feb 05 '12 at 23:29

1

You should be using jQuery UI for the slider.

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"/>

answered Feb 05 '12 at 23:29

Anil

21,730
9
73
100

2

I thought it would be nice to inform you what was his second problem, he was missing the juqery ui **css**. – gdoron Feb 06 '12 at 17:25
yup, isn't it always the simplest of things! +1 for your answer! – Anil Feb 10 '12 at 11:49

Sparky · Answer 3 · 2012-02-06T00:11:03.587

1

Since it's a jQuery UI Slider, you are missing jQuery UI which needs to be included after jQuery.

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

edited Feb 06 '12 at 00:11

answered Feb 05 '12 at 23:29

Sparky

98,165
25
199
285

That URL is valid [try it](http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js) – gdoron Feb 05 '12 at 23:40
@gdoron: ok got it. It's technically valid. I'd never leave off the scheme but that's just me. – Sparky Feb 06 '12 at 00:12

jQuery slider is unknown

3 Answers3