jQuery 入门教程(38): jQuery UI Slider 示例（一）

最新推荐文章于 2024-07-15 10:19:27 发布

引路蜂

最新推荐文章于 2024-07-15 10:19:27 发布

阅读量3.9k

点赞数 2

分类专栏：教程 jQuery JavaScript jQuery教程

教程同时被 3 个专栏收录

666 篇文章

订阅专栏

JavaScript

49 篇文章

订阅专栏

jQuery

48 篇文章

订阅专栏

本文介绍了如何使用jQuerySlider组件将HTML元素转化为滑动条UI控件，并展示了如何使用多个滑块选择值域。包括基本用法、多个滑块选择值域的实现及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery Slider组件可以把选中的HTML元素变成滑动条UI控件，滑动条可以支持多个滑块用来设置单个值或一个值域。
基本用法

 
    1<!doctype html>
 
    2<html lang="en">
 
    3<head>
 
    4    <meta charset="utf-8" />
 
    5    <title>jQuery UI Demos</title>
 
    6    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
 
    7    <script src="scripts/jquery-1.9.1.js"></script>
 
    8    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
 
    9    <script>
 
    10        $(function () {
 
    11            $("#slider").slider();
 
    12        });
 
    13    </script>
 
    14</head>
 
    15<body>
 
    16    <div id="slider"></div>
 
    17 
 
    18</body>
 
    19</html>

多个滑块选择值域

Slider支持使用两个滑块来选择一个值域，通过 min,max指定大范围， values 指定当前选择的值域。

 
    1range: true
 
    2min: 0,
 
    3max: 500,
 
    4values: [ 75, 300 ],

完整代码如下：

 
    1<!doctype html>
 
    2<html lang="en">
 
    3<head>
 
    4    <meta charset="utf-8" />
 
    5    <title>jQuery UI Demos</title>
 
    6    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
 
    7    <script src="scripts/jquery-1.9.1.js"></script>
 
    8    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
 
    9    <script>
 
    10        $(function () {
 
    11            $("#slider-range").slider({
 
    12                range: true,
 
    13                min: 0,
 
    14                max: 500,
 
    15                values: [75, 300],
 
    16                slide: function (event, ui) {
 
    17                    $("#amount").val("$" + ui.values[0]
 
    18                        + " - $" + ui.values[1]);
 
    19                }
 
    20            });
 
    21            $("#amount").val("$"
 
    22                + $("#slider-range").slider("values", 0) +
 
    23              " - $" + $("#slider-range").slider("values", 1));
 
    24        });
 
    25    </script>
 
    26</head>
 
    27<body>
 
    28 
 
    29    <p>
 
    30        <label for="amount">Price range:</label>
 
    31        <input type="text" id="amount"
 
    32               style="border: 0; color: #f6931f;
 
    33               font-weight: bold;" />
 
    34    </p>
 
    35 
 
    36    <div id="slider-range"></div>
 
    37 
 
    38 
 
    39</body>
 
    40</html>