I have installed the jQuery UI slider, but it doesn’t show in my code. I don’t see what I’m doing wrong.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.18.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-2.5.3.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<section id="main">
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
...
$("#bwvolume").slider({
value: 0,
min: 0,
max: 2500,
step: 100,
slide: function (event, ui) {
$("#spanbwvolume").val("$" + ui.value);
}
});
$("#spanbwvolume").val("$" + $("#bwvolume").slider("value"));
});
</script>
...
<tr class="format">
<td width="150" valign="top" class="tdlabelNoSize">Volumes monochrome:</td>
<td>
<div id="bwvolume"></div>(<span id="spanbwvolume"></span>)
</td>
</tr>
...
</body>
</html>
There is some space allocated in the browser. But the slider doesn’t show. My code is based on http://jqueryui.com/demos/slider/#steps.
This is what I see in FireBug:
<tr class="format">
<td class="tdlabelNoSize" width="150" valign="top">Volumes monochrome:</td>
<td>
<div id="bwvolume" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">slider=Object { element={...}, options={...}, _keySliding=false, meer...}
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>index.uiSliderHandle=0
</div>
(
<span id="spanbwvolume"></span>
)
</td>
</tr>
FireBug doesn’t report any errors.
Do I miss something like images or something? On the same page I’m using also jQuery UI Selectable (not shown in code) and this is working fine.
Did you link JQuery UI css file?
After I’ve added jquery-ui.css and slightly modified your js code the Slider appeared
see http://jsfiddle.net/LGMHP/2/