javascript - JQuery Object [object Object] has no method 'slider' when trying to use the slider demo

So im trying to use the slider demo () and i copy the code as so:

 <html>
    <head>
    <script type="text/javascript" src=".7.2.min.js"></script>
    <link rel="stylesheet" href=".8.10/themes/base/jquery-ui.css" type="text/css" media="all" />
    <meta charset="utf-8">  
        <style>
        #demo-frame > div.demo { padding: 10px !important; };
        </style>
        <script type="text/javascript">
        $(function() {
            $( "#slider-range" ).slider({
                range: true,
                min: 0,
                max: 500,


    values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });
    </script>
</head>
<body>


<div class="demo">

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Set the <code>range</code> option to true to capture a range of values with two drag handles.  The space between the handles is filled with a different background color to indicate those values are selected.</p>
</div><!-- End demo-description -->


</body>
</html>

But the slider doesnt appear, and Chrome gives me this error: Object [object Object] has no method 'slider'

Any ideas? I searched around but the fixes didnt seem to apply to me

So im trying to use the slider demo (http://jqueryui./demos/slider/#range) and i copy the code as so:

 <html>
    <head>
    <script type="text/javascript" src="http://code.jquery./jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis./ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" />
    <meta charset="utf-8">  
        <style>
        #demo-frame > div.demo { padding: 10px !important; };
        </style>
        <script type="text/javascript">
        $(function() {
            $( "#slider-range" ).slider({
                range: true,
                min: 0,
                max: 500,


    values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });
    </script>
</head>
<body>


<div class="demo">

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Set the <code>range</code> option to true to capture a range of values with two drag handles.  The space between the handles is filled with a different background color to indicate those values are selected.</p>
</div><!-- End demo-description -->


</body>
</html>

But the slider doesnt appear, and Chrome gives me this error: Object [object Object] has no method 'slider'

Any ideas? I searched around but the fixes didnt seem to apply to me

Share Improve this question edited Jul 9, 2012 at 23:01 hakre 199k55 gold badges450 silver badges856 bronze badges asked Jul 9, 2012 at 22:31 Headchopperz 1173 silver badges13 bronze badges

5 you should load the jquery-ui.js plugin. – Ram Commented Jul 9, 2012 at 22:33
3 Oh thanks, now i see, i feel so stupid. Haha – Headchopperz Commented Jul 9, 2012 at 22:37

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

This is simply because you didn't include the source code of jQuery UI Slider in your document. "UI Core", "UI Widget" and "UI Mouse" are dependencies and you should include them in your document. Just go to the download page of JQuery UI website and download an appropriate version.(At least check "UI Core", "UI Widget", "UI Mouse" and "Slider"). When you extract content of downloaded file, you will find necessary scripts by their names.

Programmer puzzle solving

javascript - JQuery Object [object Object] has no method 'slider' when trying to use the slider demo - Stack Ove

1 Answer 1

Articles related to this article

comment list (0)