jQuery UI & Slider: Binding slider to select dropbox

This entry is part 10 of 11 in the series jQuery UI Slider

jQuery UI Slider – Slider bound to select

The select stays updated and visible to display the change.

When the select is changed, the slider is updated, too.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI Slider - Slider bound to select</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        $(function () {
            var select = $('#minbeds');
            var slider = $("<div id='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').change(function () {
                slider.slider('value', this.selectedIndex + 1);

<form id='reservation'>
    <label for='minbeds'>Minimum number of beds</label>
    <select name='minbeds' id='minbeds'>

Try The Code Slider Widgets API Doc
Series Navigation<< jQuery UI & Slider: Range
jQuery UI & Slider: Vertical slider >>

Leave a comment

Leave a Reply