jQuery UI Slider example
A slider is a control element that uses a knob or lever moved horizontally to control a variable, such as volume on a radio or brightness on a screen. It is often the UI control of choice for letting users select a value or range from a fixed set of options. jQueryUI provides us a slider control through slider widget.
$( "#slider" ).slider();
<div id="slider"></div>
Browser View
<html>
<head>
<title>jQuery UI</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Slider with Range Values
You can fix the maximum and minimum value to the slider.
$( "#sider-1" ).slider({
range: "max",
min: 1,
max: 10,
value: 5,
});
<div id="sider-1"></div>
Browser View
<html>
<head>
<title>jQuery UI Slider example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#sider-1" ).slider({
range: "max",
min: 1,
max: 10,
value: 5,
slide: function( event, ui ) {
$( "#txtVal" ).val( ui.value );
}
});
$( "#txtVal" ).val( $( "#sider-1" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<label>No. of Students:</label>
<input type="text" id="txtVal" readonly style="border:0; ">
</p>
<div id="sider-1" style="width:50%; "></div>
</body>
</html>
Related Topics