Home/ Questions/Q 8228363
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T16:26:01+00:00

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

  • 0

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

 <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0