I’m having a problem setting up jQuery slider and ensuring that it lines up well with the rest of my elements (when it comes to spacing/positioning both vertically and horizontally to maintain consistency). In addition, it is now just appearing as [object object]. Any ideas on how I can sort this out? Here is my code so far: http://jsfiddle.net/dhExk/1/
HTML
<div style="padding-top: 10px; text-align: center; font-size: 12px;">
<div align="left" style="padding-bottom: 20px">
<div style="padding-bottom: 10px">
<div style="padding-bottom: 10px; font-size: 16px">Search By:</div>
<div style="padding-bottom: 10px;">
<div class="modal_field2">Park:</div>
<select>
<option selected="selected">Any</option>
</select>
</div>
<div class="modal_field2">Building:</div>
<select>
<option selected="selected">Any</option>
</select>
</div>
<div class="modal_field2">Room Type:</div>
<select>
<option selected="selected">Any</option>
</select>
</div>
<div class="modal_field2" style="text-align: left">No of Students:</div>
<div style="display: inline-block; padding-bottom: 20px; float: right">
<input type="text" id="amount" style="border: 0; color: #000; background-color: #fff; font-size: 12px;" disabled="disabled"/>
</div>
</div>
CSS
.modal_field2 {
width: 100px;
float: left;
padding-top: 3px;
}
JS
$(function() {
$("#slider").slider({
value: 50,
min: 20,
max: 400,
step: 10,
slide: function(event, ui) {
$("#amount").val("" + ui.value);
}
});
$("#amount").val("" + $("#slider").slider("value"));
});
$("#slider")is a selector selecting an element with the idslider. You don’t have an element with the IDslider, so there is no slider, and the slidervalue will be an object since there is an obvious error, there is no slider ?FIDDLE