In jquery, slider means "slider, floating block, scroll bar slider" and is a small plug-in in jquery UI. Slider plugin allows selection via slider. There are various different options such as multiple handles and ranges. The handle can be moved using the mouse or arrow keys.
The operating environment of this article: windows10 system, jquery version 1.10.4, thinkpad t480 computer.
slider (slider) is a small plug-in in jquery UI.
The jQuery UI Slider plugin allows selection via a slider. There are various different options such as multiple handles and ranges. The handle can be moved using the mouse or arrow keys.
Theming
The Slider Widget uses the jQuery UI CSS framework to define its look and feel. If you need to use slider-specific styles, you can use the following CSS class name:
ui-slider: The track of the slider control. This element will also have a ui-slider-horizontal or ui-slider-vertical class depending on the orientation of the slider.
ui-slider-handle: Slider handle.
ui-slider-range: The selected range used when setting the range option. If the range option is set to "min" or "max", the element will have an additional ui-slider-range-min or ui-slider-range-max class respectively.
Example
A simple jQuery UI slider.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滑块部件（Slider Widget）演示</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<style>#slider { margin: 10px; } </style>
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<div id="slider"></div>
<script>
$( "#slider" ).slider();
</script>
</body>
</html>For more programming-related knowledge, please visit: Programming Learning! !
Related recommendations: "jQuery Tutorial"
The above is the detailed content of What is slider in jquery?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
