Home > Article > Web Front-end > What is slider in jquery?

What is slider in jquery?

青灯夜游Original: 2020-12-14 09:57:553947browse

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：what are css keyframesNext article：what are css keyframes

See more

What is slider in jquery?

Related articles