滑塊

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

調(diào)用方式

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

色彩

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

相關(guān)資料

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

樣式

連續(xù)滑塊

在線運(yùn)行

間續(xù)滑塊

在線運(yùn)行

禁用狀態(tài)

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

連續(xù)滑塊：

在線運(yùn)行

間續(xù)滑塊：

在線運(yùn)行

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

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

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

CSS 類名列表