MDUIDocs
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Styles
Frameworks
Components
Avatar Badge BottomAppBar Button ButtonIcon Card Checkbox Chip CircularProgress Collapse Dialog Divider Dropdown Fab Icon Layout LinearProgress List Menu NavigationBar NavigationDrawer NavigationRail Radio RangeSlider Select SegmentedButton Slider Snackbar Switch Tabs TextField Tooltip TopAppBar
Functions
Libraries

RangeSlider

范围滑块组件用于让用户在一系列值中选择一个范围。

使用方法

按需导入组件:

import 'mdui/components/range-slider.js';

按需导入组件的 TypeScript 类型:

import type { RangeSlider } from 'mdui/components/range-slider.js';

使用示例:

<mdui-range-slider></mdui-range-slider>

示例

默认值

通过 value 属性,可以读取或设置范围滑块的当前值。该属性值是一个数组,只能通过 JavaScript 属性进行读取和设置。

禁用状态

添加 disabled 属性可以禁用范围滑块。

范围

使用 minmax 属性设置范围滑块的最小值和最大值。

步进间隔

使用 step 属性设置范围滑块的步进间隔。

刻度标记

添加 tickmarks 属性可以在范围滑块上添加刻度标记。

隐藏文本提示

添加 nolabel 属性可以隐藏范围滑块上的文本提示。

修改文本提示

通过 labelFormatter JavaScript 属性,可以修改文本提示的显示格式。该属性值是一个函数,函数参数为当前范围滑块的值,返回值为你期望显示的文本。

API

Properties

AttributePropertyReflectTypeDefault
defaultValuenumber[][]

默认值。在重置表单时,将重置为该默认值。此属性只能通过 JavaScript 属性设置

valuenumber[]-

滑块的值,为数组格式,将于表单数据一起提交。

NOTE:该属性无法通过 HTML 属性设置初始值,如果要修改该值,只能通过修改 JavaScript 属性值实现。

autofocusautofocusbooleanfalse

是否在页面加载完成后自动获取焦点

tabindextabIndexnumber-

元素在使用 Tab 键切换焦点时的顺序

minminnumber0

滑块的最小值,默认为 0

maxmaxnumber100

滑块的最大值,默认为 100

stepstepnumber1

步进间隔,默认为 1

tickmarkstickmarksbooleanfalse

是否添加刻度标记

nolabelnolabelbooleanfalse

是否隐藏文本提示

disableddisabledbooleanfalse

是否被禁用

formformstring-

关联的 <form> 元素。此属性值应为同一页面中的一个 <form> 元素的 id

如果未指定此属性,则该元素必须是 <form> 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 <form> 元素的子元素。

namenamestring''

滑块的名称,该名称将与表单数据一起提交

validityValidityState-

表单验证状态对象,具体参见 ValidityState

validationMessagestring-

如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串

labelFormatter(value: number) => string-

用于自定义标签的显示格式的函数。函数参数为滑块的当前值,返回值为期望显示的文本。

Methods

NameParametersReturns
click
void

模拟鼠标点击元素

focus
  • options: FocusOptions (Optional)
void

将焦点设置到当前元素。

可以传入一个对象作为参数,该对象的属性包括:

  • preventScroll:默认情况下,元素获取焦点后,页面会滚动以将该元素滚动到视图中。如果不希望页面滚动,可以将此属性设置为 true
blur
void

移除当前元素的焦点

checkValidity
boolean

检查表单字段是否通过验证。如果未通过,返回 false 并触发 invalid 事件;如果通过,返回 true

reportValidity
boolean

检查表单字段是否通过验证。如果未通过,返回 false 并触发 invalid 事件;如果通过,返回 true

如果验证未通过,还会在组件上显示验证失败的提示。

setCustomValidity
  • message: string
void

设置自定义的错误提示文本。只要这个文本不为空,就表示字段未通过验证

Events

Name
focus

获得焦点时触发

blur

失去焦点时触发

change

值发生变更,且失去焦点时,将触发该事件

input

值变更时触发

invalid

表单字段验证未通过时触发

CSS Parts

Name
track-inactive

未激活状态的轨道

track-active

已激活状态的轨道

handle

操作杆

label

提示文本

tickmark

刻度标记

On this page