jQuery Tutorial
In jQuery, slider method is used to create a selected element as slider in the web page.
We can make slider as either horizontal or vertical.
This jQuery code is used to create div element 'divSlider' as horizontal slider in the web page.
Need to use orientation property as horizontal to make horizontal slider in jQuery.
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jQuery slider method</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <style> #divSlider { margin: 10px; width: 200px; background-color: blue; } </style> <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> </head> <body> <div id="divSlider"> </div> <script> $("#divSlider").slider({ orientation: "horizontal" }); </script> </body> </html>Output:
This jQuery code is used to create div element 'divSlider' as vertical slider in the web page.
Need to use orientation property as vertical to make vertical slider in jQuery.
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jQuery slider method</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <style> #divSlider { margin: 10px; background-color: blue; } </style> <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> </head> <body> <div id="divSlider"> </div> <script> $("#divSlider").slider({ orientation: "vertical" }); </script> </body> </html>Output:
Below jQuery code is used to slider to select the values as range.
range property to be true to make range slider.
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jQuery slider method</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <style> #divSlider { margin: 10px; width: 200px; background-color: blue; } </style> <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> </head> <body> <div id="divSlider"> </div> <script> $("#divSlider").slider({ range: true }); </script> </body> </html>Output:
value property in slider method is used to set the selected value and ui.value is used to get the selected value during slider change event.
Default min and max value for the slider is 0 to 100.
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jQuery slider method</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <style> #divSlider { margin: 10px; background-color: blue; } </style> <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> </head> <body> <div style="width:400px;"><table border="0" style="width:100%;"><tr><td style="width:5%;">0</td><td style="width:90%;"><div id="divSlider"> </div></td><td style="width:5%;">100</td></tr></table></div> <script> $("#divSlider").slider({ value: 10, change: function (event, ui) { alert("Selected value: "+ ui.value); } }); </script> </body> </html>Output:
To make custom minimum and maximum range for the slider, we have min and max properties in slider method to customize the slider range.
change property can be used to configure event handler when changing the slider.
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jQuery slider method</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <style> #divSlider { margin: 10px; background-color: blue; } </style> <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> </head> <body> <div style="width:400px;"><table border="0" style="width:100%;"><tr><td style="width:5%;">0</td><td style="width:90%;"><div id="divSlider"> </div></td><td style="width:5%;">10</td></tr></table></div> <script> $("#divSlider").slider({ min: 0, max: 10, value: 5, change: function (event, ui) { alert("Selected value: "+ ui.value); } }); </script> </body> </html>Output:
This jQuery code is used to set and get the selected range values in slider control.
values property is used to set the selected range values in slider and ui.values is used to get the selected range values in slider from range 0 to 10.
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jQuery slider method</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <style> #divSlider { margin: 10px; background-color: blue; } </style> <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> </head> <body> <div style="width:400px;"><table border="0" style="width:100%;"><tr><td style="width:5%;">0</td><td style="width:90%;"><div id="divSlider"> </div></td><td style="width:5%;">10</td></tr></table></div> <script> $("#divSlider").slider({ min: 0, max: 10, range: true, values: [3,7], change: function (event, ui) { alert("Selected value: "+ ui.values); } }); </script> </body> </html>Output:
disabled property is used to disable the slider in jQuery.
$("#divSlider").slider({ min: 0, max: 10, range: true, disabled: true, values: [3,7], change: function (event, ui) { alert("Selected value: "+ ui.values); } });Output:
jQuery Tutorial
Privacy Policy | Copyright2020 - All Rights Reserved. | Contact us
| Report website issues in Github
| Facebook page
| Google+ page