Slider not moving on drag
I'm just trying to get the hang of the ui slider. Seems like it should
be easy enough, but I'm running into a problem. When I drag on the
handle, I get the following error in Firefox 3.0.1:
Warning: Error in parsing value for property 'left'. Declaration
dropped.
My setup is pretty simple, and I I'm using the latest versions of
jQuery, ui.core and ui.slider (the ui functions were downloaded as
separate personalized packages.)
HTML:
<!-- Years Experience -->
<div id="slider_bar" class="slider_bar">
<div class="slider_handle"></div>
</div>
CSS:
/* slider */
.slider_bar {
background: transparent url(/public/images/widgets/slider/slider-
bar.gif) top left no-repeat;
height: 19px;
width: 260px;
position: relative;
margin: 0 5px;
z-index: 50;
}
.slider_handle {
background: transparent url(/public/images/widgets/slider/slider-
handle.png) top left no-repeat;
height: 19px;
width: 20px;
overflow: hidden;
position: absolute;
top: 1px;
left: 0;
z-index: 55;
}
SCRIPT:
<script type="text/javascript" language="Javascript">
$(document).ready(function() {
$("#slider_bar").slider({
handle: 'slider_handle',
minValue: 0,
maxValue: 30,
start: function (e, ui) {
console.log("started!");
}
});
});
</script>
Any ideas? Thanks!