jQuery UI API - 滑塊部件（Slider Widget） · W3School jQuery UI 教程

# jQuery UI API - 滑塊部件（Slider Widget） ## 所屬類別 [小部件（Widgets）](ref-widgets.html) ## 用法 **描述：**拖動手柄來選擇一個數值。 **版本新增：**1.5 jQuery UI 滑塊（Slider）插件允許通過滑塊進行選擇。有各種不同的選項，比如多個手柄和范圍。手柄可通過鼠標或箭頭按鍵進行移動。滑塊部件（Slider Widget）會在初始化時創建帶有 class `ui-slider-handle` 的手柄元素。您可以通過在初始化之前創建并追加元素，同時向元素添加 `ui-slider-handle` class 來指定自定義的手柄元素。它只會創建匹配 [`value`](#option-value)/[`values`](#option-values) 長度所需的數量的手柄。例如，如果您指定 `values: [ 1, 5, 18 ]`，且創建一個自定義手柄，插件將創建其他兩個。 ### 主題化滑塊部件（Slider Widget）使用 [jQuery UI CSS 框架](api-css-framework.html) 來定義它的外觀和感觀的樣式。如果需要使用滑塊指定的樣式，則可以使用下面的 CSS class 名稱： * `ui-slider`：滑塊控件的軌道。該元素會根據滑塊的 [`orientation`](#option-orientation) 另外帶有一個 `ui-slider-horizontal` 或 `ui-slider-vertical` class。 * `ui-slider-handle`：滑塊手柄。 * `ui-slider-range`：當設置 [`range`](#option-range) 選項時使用的已選范圍。如果 `range` 選項設置為 `"min"` 或 `"max"`，則該元素會分別另外帶有一個 `ui-slider-range-min` 或 `ui-slider-range-max` class。 ### 依賴 * [UI 核心（UI Core）](ref-ui-core.html) * [部件庫（Widget Factory）](api-jQuery-widget.html) * [鼠標交互（Mouse Interaction）](api-mouse.html) ### 附加說明 * 該部件要求一些功能性的 CSS，否則將無法工作。如果您創建了一個自定義的主題，請使用小部件指定的 CSS 文件作為起點。 ## 實例一個簡單的 jQuery UI 滑塊（Slider）。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>滑塊部件（Slider Widget）演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style>#slider { margin: 10px; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="slider"></div> <script> $( "#slider" ).slider(); </script> </body> </html> ```