jQuery JRange API 是一個基于 jQuery 的插件,可以用來實現對范圍滑塊的操作,使得用戶可以方便地選擇最小值與最大值。在本文中,我們將介紹使用 JRange API 制作范圍滑塊的步驟與相關注意事項。
首先,我們需要在 HTML 頁面中引入 JRange 插件的 css 和 js 文件:
<link rel="stylesheet" href="jquery.range.css"> <script src="jquery.range.js"></script>
然后,我們可以通過以下代碼創建一個范圍滑塊:
<input type="text" class="range-slider">
接著,我們可以使用以下 jQuery 代碼初始化滑塊:
$(".range-slider").jRange({ from: 0, to: 100, step: 1, scale: [0, 50, 100], format: '%s', width: 300, showLabels: true, isRange: true });
這段代碼中,我們設置了范圍滑塊的初始值、最小值、最大值、步長、刻度、顯示格式、寬度以及其他可選項。最后,我們需要注意的是,需要在樣式文件中對滑塊的樣式進行相應的修改,以適配我們的頁面。可以參考 github 上的示例樣式文件。