var slider = $('<divid="slider"></div>').insertAfter(select).slider({
min: 1,
max: 6,
range: "min",
value: select[0].selectedIndex + 1,
slide: function(event, ui) {
select[0].selectedIndex = ui.value - 1;
}
});
$("#minbeds").click(function() {
slider.slider("value", this.selectedIndex + 1);
});
});
</script>
</head>
<body>
<divclass="demo">
<formid="reservation">
<labelfor="minbeds">Minimum number of beds</label>
<selectname="minbeds"id="minbeds">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</form>
</div><!-- End demo -->
<divclass="demo-description">
<p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p>
