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 HeadchopperzHeadchopperz 1173 silver badges13 bronze badges 2-
5
you should load the
jquery-ui.jsplugin. – 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
1 Answer
Reset to default 5This 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745634413a4637300.html
评论列表（0条）