In this tutorial, we will learn Jquery UI Slider With Dropdown Select Example

Example :

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Slider - Slider bound to select Example</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
    <style type="text/css">
            margin:30px auto;
            text-align: center;
    <h2>Jquery UI Slider With Dropdown Select Example -</h2>
    <div class="content">
        <form id="reservation">
            <label for="minbeds">Minimum number of beds</label>
            <select name="minbeds" id="minbeds">
    $( 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" ).on( "change", function() {
            slider.slider( "value", this.selectedIndex + 1 );

May this example help you.