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>
run this source code Browser View
Full Source
<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>
run this source code Browser View

Full Source
<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>