jQuery range-slider component not getting rendered in UI
Question
I want to implement jquery-ui slider component and written the below code in my html, but when it renders it does not show the slider, any idea what is wrong in it ? In the chrome browser developer tools->console I am not seeing any error and in the dom tree of the html file also showing the slider div with all the component it it. But in UI it is not visible.. Here is the html code below.
<html>
<head>
<meta charset="ISO-8859-1">
<title>Slider Test</title>
<script type="text/javascript" src="jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.slider.js"></script>
<style type="text/css" src="themes/base/jquery.ui.all.css"></style>
</head>
<body>
<h1>hello....</h1>
<div id="chartDiv"></div>
<div id="slider-range"></div>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
<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>
</body>
</html>
1 answers
solution1
0 ACCPTED 2014-01-29 09:37:41
Your code is fine (See Fiddle ) Although it's missing a key comportment, which is the CSS. Firstly always include your CSS before your JavaScript; Also, you've incuded your stylesheet incorrectly, but almost there! :)
<head>
<script type="text/javascript" src="jquery/jquery-1.10.2.js"></script>
<style type="text/css" src="themes/base/jquery.ui.all.css"></style>
</head>
to
<head>
<link href="themes/base/jquery.ui.all.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="jquery/jquery-1.10.2.js"></script>
</head>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.