滑塊

MDUI 的滑塊使用 HTML5 的 <input type="range"/> 輸入框?qū)崿F(xiàn)。

調(diào)用方式

滑塊組件在頁面加載完后會自動初始化。對于動態(tài)生成的滑塊，需要調(diào)用 mdui.updateSliders() 進(jìn)行初始化。

色彩

使用強(qiáng)調(diào)色。

相關(guān)資料

Material Design 滑塊設(shè)計規(guī)范

樣式

連續(xù)滑塊

在線運(yùn)行

間續(xù)滑塊

在線運(yùn)行

禁用狀態(tài)

在連續(xù)滑塊或間續(xù)滑塊的 input 元素上添加 disabled 屬性就能禁用滑塊。

連續(xù)滑塊：

在線運(yùn)行

間續(xù)滑塊：

在線運(yùn)行

動態(tài)生成的滑塊

如果你的滑塊組件是動態(tài)生成的，或者動態(tài)修改了滑塊的值，則需要調(diào)用 mdui.updateSliders() 方法來重新初始化滑塊組件。

該方法可以接受一個含 .mdui-slider 類的 CSS 選擇器、或者 DOM 元素、或者 DOM 元素組成的數(shù)組作為參數(shù)，表示只重新初始化指定滑塊。如果沒有傳入?yún)?shù)，將重新初始化頁面中的所有滑塊。

CSS 類名列表