Home/ Questions/Q 7500455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T20:11:37+00:00

How does this slider work? http://jqueryui.com/demos/slider source given shows up nothing <style> #demo-frame >

  • 0

How does this slider work?

http://jqueryui.com/demos/slider

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0