Jquery UI Slider With Dropdown Select Example

Jqury UI

Nicesnippets

142

29-06-2020


Hi Guys,

In this example,I will learn you how to use slider with dropdown in jquery ui.you can easy and simply use slider with dropdown in jquery ui.

The slider function in Jquery UI can be used to select numeric data as an input from the user.In this slider select dropdown value then change silder value.

Example :

<!doctype html>

<html lang="en">

<head>

<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="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style type="text/css">

.content{

margin:30px auto;

width:350px;

}

#minbeds{

margin-bottom:20px;

}

h2{

text-align: center;

}

</style>

</head>

<body>

<h2>Jquery UI Slider With Dropdown Select Example - Nicesnippets.com</h2>

<div class="content">

<form id="reservation">

<label for="minbeds">Minimum number of beds</label>

<select name="minbeds" id="minbeds">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

<option>6</option>

</select>

</form>

</div>

</body>

<script>

$( 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 );

});

});

</script>

</html>

It will help you...


Recommended Posts