Slider-按钮与选择-ArkTS组件-ArkUI（方舟UI框架）-应用框架

子组件

无

接口

Slider(options?: SliderOptions)

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
options	SliderOptions	否	配置滑动条的参数。

SliderOptions对象说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开

名称	类型	必填	说明
value	number	否	当前进度值。默认值：与参数min的取值一致。从API version 10开始，该参数支持$$双向绑定变量。
min	number	否	设置最小值。默认值：0
max	number	否	设置最大值。默认值：100 说明： min >= max异常情况，min取默认值0，max取默认值100。 value不在[min, max]范围之内，取min或者max，靠近min取min，靠近max取max。
step	number	否	设置Slider滑动步长。默认值：1 取值范围：[0.01, max - min] 说明：若设置的step值小于0或大于max值时，则按默认值显示。
style	SliderStyle	否	设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSet
direction⁸⁺	Axis	否	设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal
reverse⁸⁺	boolean	否	设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。默认值：false

SliderStyle枚举说明

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开

名称	说明
OutSet	滑块在滑轨上。卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。元服务API：从API version 11开始，该接口支持在元服务中使用。
InSet	滑块在滑轨内。卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。元服务API：从API version 11开始，该接口支持在元服务中使用。
NONE¹²⁺	无滑块卡片能力：从API version 12开始，该接口支持在ArkTS卡片中使用。元服务API：从API version 12开始，该接口支持在元服务中使用。

名称

说明

OutSet

滑块在滑轨上。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

InSet

滑块在滑轨内。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

NONE¹²⁺

无滑块

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

属性

支持除触摸热区以外的通用属性。

blockColor

blockColor(value: ResourceColor)

设置滑块的颜色。

当滑块形状设置为SliderBlockType.DEFAULT时，blockColor可设置默认圆形滑块颜色。

当滑块形状设置为SliderBlockType.IMAGE时，滑块无填充，设置blockColor不生效。

当滑块形状设置为SliderBlockType.SHAPE时，blockColor可设置自定义形状的填充颜色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	ResourceColor	是	滑块的颜色。默认值：$r('sys.color.ohos_id_color_foreground_contrary')

参数名

类型

必填

说明

value

ResourceColor

是

滑块的颜色。

默认值：$r('sys.color.ohos_id_color_foreground_contrary')

trackColor

trackColor(value: ResourceColor | LinearGradient)

设置滑轨的背景颜色。

从API version 12开始支持利用LinearGradient设置滑轨的渐变色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	ResourceColor \| LinearGradient¹²⁺	是	滑轨的背景颜色。说明：设置渐变色时，若颜色断点颜色值为非法值或者渐变色断点为空时，渐变色不起效果。默认值：$r('sys.color.ohos_id_color_component_normal') 该接口中的LinearGradient类型不支持在元服务中使用。

参数名

类型

必填

说明

value

ResourceColor | LinearGradient¹²⁺

是

滑轨的背景颜色。

说明： 设置渐变色时，若颜色断点颜色值为非法值或者渐变色断点为空时，渐变色不起效果。

默认值：$r('sys.color.ohos_id_color_component_normal')

该接口中的LinearGradient类型不支持在元服务中使用。

selectedColor

selectedColor(value: ResourceColor)

设置滑轨的已滑动部分颜色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	ResourceColor	是	滑轨的已滑动部分颜色。默认值：$r('sys.color.ohos_id_color_emphasize')

参数名

类型

必填

说明

value

ResourceColor

是

滑轨的已滑动部分颜色。

默认值：$r('sys.color.ohos_id_color_emphasize')

showSteps

showSteps(value: boolean)

设置当前是否显示步长刻度值。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	boolean	是	当前是否显示步长刻度值。默认值：false

参数名

类型

必填

说明

value

boolean

是

当前是否显示步长刻度值。

默认值：false

showTips

showTips(value: boolean, content?: ResourceStr)

设置滑动时是否显示气泡提示。

当direction的值为Axis.Horizontal时，tip显示在滑块上方，如果上方空间不够，则在下方显示。值为Axis.Vertical时，tip显示在滑块左边，如果左边空间不够，则在右边显示。不设置周边边距或者周边边距比较小时，tip会被截断。

tip的绘制区域为Slider自身节点的overlay。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	boolean	是	滑动时是否显示气泡提示。默认值：false
content¹⁰⁺	ResourceStr	否	气泡提示的文本内容，默认显示当前百分比。

参数名

类型

必填

说明

value

boolean

是

滑动时是否显示气泡提示。

默认值：false

content¹⁰⁺

ResourceStr

否

气泡提示的文本内容，默认显示当前百分比。

trackThickness⁸⁺

trackThickness(value: Length)

设置滑轨的粗细。设置为小于等于0的值时，取默认值。

为保证滑块和滑轨的SliderStyle样式，blockSize跟随trackThickness同比例增减。

当style为SliderStyle.OutSet时，trackThickness ：blockSize = 1 ：4，当style为SliderStyle.InSet时，trackThickness ：blockSize = 5 ：3。

在变更trackThickness过程中，若trackThickness的大小或者blockSize的大小超过slider组件的width或者height(SliderStyle.OutSet时可能trackThickness没超过，但是blockSize超过了)，取默认值。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	Length	是	滑轨的粗细。默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp。

参数名

类型

必填

说明

value

Length

是

滑轨的粗细。

默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp。

blockBorderColor¹⁰⁺

blockBorderColor(value: ResourceColor)

设置滑块描边颜色。

当滑块形状设置为SliderBlockType.DEFAULT时，blockBorderColor可设置默认圆形滑块描边颜色。

当滑块形状设置为SliderBlockType.IMAGE时，滑块无描边，设置blockBorderColor不生效。

当滑块形状设置为SliderBlockType.SHAPE时，blockBorderColor可设置自定义形状中线的颜色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	ResourceColor	是	滑块描边颜色。默认值：'#00000000'

参数名

类型

必填

说明

value

ResourceColor

是

滑块描边颜色。

默认值：'#00000000'

blockBorderWidth¹⁰⁺

blockBorderWidth(value: Length)

设置滑块描边粗细。

当滑块形状设置为SliderBlockType.DEFAULT时，blockBorderWidth可设置默认圆形滑块描边粗细。

当滑块形状设置为SliderBlockType.IMAGE时，滑块无描边，设置blockBorderWidth不生效。

当滑块形状设置为SliderBlockType.SHAPE时，blockBorderWidth可设置自定义形状中线的粗细。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	Length	是	滑块描边粗细。

stepColor¹⁰⁺

stepColor(value: ResourceColor)

设置刻度颜色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	ResourceColor	是	刻度颜色。默认值： $r('sys.color.ohos_id_color_foreground')混合 $r('sys.color.ohos_id_alpha_normal_bg')透明度的颜色

参数名

类型

必填

说明

value

ResourceColor

是

刻度颜色。

默认值：

$r('sys.color.ohos_id_color_foreground')混合

$r('sys.color.ohos_id_alpha_normal_bg')透明度的颜色

trackBorderRadius¹⁰⁺

trackBorderRadius(value: Length)

设置底板圆角半径。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	Length	是	底板圆角半径。默认值： style值为SliderStyle.OutSet默认值为'2vp' style值为SliderStyle.InSet默认值为'10vp'。

参数名

类型

必填

说明

value

Length

是

底板圆角半径。

默认值：

style值为SliderStyle.OutSet默认值为'2vp'

style值为SliderStyle.InSet默认值为'10vp'。

selectedBorderRadius¹²⁺

selectedBorderRadius(value: Dimension)

设置已滑动部分（高亮）圆角半径。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	Dimension	是	已选择部分圆角半径。默认值：style值为SliderStyle.InSet或SliderStyle.OutSet时，跟随底板圆角；style值为SliderStyle.NONE时，为0。

参数名

类型

必填

说明

value

Dimension

是

已选择部分圆角半径。

默认值：style值为SliderStyle.InSet或SliderStyle.OutSet时，跟随底板圆角；style值为SliderStyle.NONE时，为0。

blockSize¹⁰⁺

blockSize(value: SizeOptions)

设置滑块大小。

当滑块形状设置为SliderBlockType.DEFAULT时，取宽高的最小值作为圆形半径。

当滑块形状设置为SliderBlockType.IMAGE时，用于设置图片的尺寸大小，图片采用ObjectFit.Cover策略进行缩放。

当滑块形状设置为SliderBlockType.SHAPE时，用于设置自定义形状的大小，自定义形状也会采用ObjectFit.Cover策略进行缩放。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	SizeOptions	是	滑块大小。默认值：当参数style的值设置为SliderStyle.OutSet时为{width: 16, height: 16}，当参数style的值设置为SliderStyle.InSet时为{width: 12, height: 12}，当参数style的值设置为SliderStyle.NONE时为，此字段不生效。当设置的blockSize的宽高值不相等时，取较小值的尺寸，当设置的宽高值中有一个或两个都小于等于0的时候，取默认值。

参数名

类型

必填

说明

value

SizeOptions

是

滑块大小。

默认值：当参数style的值设置为SliderStyle.OutSet时为{width: 16, height: 16}，当参数style的值设置为SliderStyle.InSet时为{width: 12, height: 12}，当参数style的值设置为SliderStyle.NONE时为，此字段不生效。

当设置的blockSize的宽高值不相等时，取较小值的尺寸，当设置的宽高值中有一个或两个都小于等于0的时候，取默认值。

blockStyle¹⁰⁺

blockStyle(value: SliderBlockStyle)

设置滑块形状参数。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	SliderBlockStyle	是	滑块形状参数。默认值：SliderBlockType.DEFAULT，使用圆形滑块。

参数名

类型

必填

说明

value

SliderBlockStyle

是

滑块形状参数。

默认值：SliderBlockType.DEFAULT，使用圆形滑块。

stepSize¹⁰⁺

stepSize(value: Length)

设置刻度大小（直径）。当值为0时，刻度点不显示，当值小于0时，取默认值。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	Length	是	刻度大小（直径）。默认值：'4vp' 取值范围：[0, trackThickness)

参数名

类型

必填

说明

value

Length

是

刻度大小（直径）。

默认值：'4vp'

取值范围：[0, trackThickness)

minLabel^(deprecated)

minLabel(value: string)

设置最小值。

从API Version 9开始废弃，使用min替代。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	string	是	最小值。

maxLabel^(deprecated)

maxLabel(value: string)

设置最大值。

从API Version 9开始废弃，使用max替代。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	string	是	最大值。

说明

Slider无默认padding。
当Slider为水平滑动条时，Slider默认高度为40vp，宽度为父容器的宽度，滑动条居中显示，左右间距为分别为10vp，若设置padding，padding不会覆盖左右间距。
当Slider为竖直滑动条时，Slider默认宽度为40vp，高度为父容器的高度，滑动条居中显示，上下间距为分别为6vp，若设置padding，padding不会覆盖上下间距。

sliderInteractionMode¹²⁺

sliderInteractionMode(value: SliderInteraction)

设置用户与滑动条组件交互方式。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	SliderInteraction	是	用户与滑动条组件交互方式。默认值：SliderInteraction.SLIDE_AND_CLICK。

参数名

类型

必填

说明

value

SliderInteraction

是

用户与滑动条组件交互方式。

默认值：SliderInteraction.SLIDE_AND_CLICK。

minResponsiveDistance¹²⁺

minResponsiveDistance(value: number)

设置滑动响应的最小距离。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	number	是	设置滑动响应的最小距离，滑动超过此距离后才响应使滑块滑动。说明：单位与参数min和max一致。当value小于0、大于MAX-MIN或非法值时，取默认值。默认值：0。

参数名

类型

必填

说明

value

number

是

设置滑动响应的最小距离，滑动超过此距离后才响应使滑块滑动。

说明：

单位与参数min和max一致。

当value小于0、大于MAX-MIN或非法值时，取默认值。

默认值：0。

contentModifier¹²⁺

contentModifier(modifier: ContentModifier<SliderConfiguration>)

定制Slider内容区的方法。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
modifier	ContentModifier<SliderConfiguration>	是	在Slider组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

参数名

类型

必填

说明

modifier

ContentModifier<SliderConfiguration>

是

在Slider组件上，定制内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

说明

如果设置了contentModifier，则在自定义区域内点击和手势滑动均不可触发原slider组件的onChange事件。
仅当调用triggerChange函数且传递正确的参数值时才可以触发原slider组件的onChange事件。

slideRange¹²⁺

slideRange(value: SlideRange)

设置有效滑动区间。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	SlideRange	是	设置有效滑动区间

SliderBlockStyle¹⁰⁺对象说明

Slider组件滑块形状参数。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开

名称	类型	必填	说明
type	SliderBlockType	是	设置滑块形状。默认值：SliderBlockType.DEFAULT，使用圆形滑块。
image	ResourceStr	否	设置滑块图片资源。图片显示区域大小由blockSize属性控制，请勿输入尺寸过大的图片。
shape	Circle \| Ellipse \| Path \| Rect	否	设置滑块使用的自定义形状。

名称

类型

必填

说明

type

SliderBlockType

是

设置滑块形状。

默认值：SliderBlockType.DEFAULT，使用圆形滑块。

image

ResourceStr

否

设置滑块图片资源。

图片显示区域大小由blockSize属性控制，请勿输入尺寸过大的图片。

shape

Circle | Ellipse | Path | Rect

否

设置滑块使用的自定义形状。

SliderBlockType¹⁰⁺枚举说明

Slider组件滑块形状枚举。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开

名称	值	说明
DEFAULT	0	使用默认滑块（圆形）。
IMAGE	1	使用图片资源作为滑块。
SHAPE	2	使用自定义形状作为滑块。

SliderInteraction¹²⁺枚举说明

用户与滑动条组件交互方式

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开

名称	值	说明
SLIDE_AND_CLICK	0	用户可拖拽滑块或者点击滑轨使滑块移动，鼠标或手指按下即发生移动。
SLIDE_ONLY	1	不允许用户通过点击滑轨使滑块移动。
SLIDE_AND_CLICK_UP	2	用户可拖拽滑块或者点击滑轨使滑块移动，鼠标或手指抬起时，若与屏幕按压位置一致，则触发移动。

SlideRange¹²⁺对象说明

定义SlideRange中使用的回调类型。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开

名称	类型	必填	说明
from	number	否	设置有效滑动区间的开始。
to	number	否	设置有效滑动区间的结束。

说明

当前仅当MIN<=from<=to<=MAX时该接口生效(MIN和MAX不依赖于其设置的值, 而取决于其实际生效的值)。
可只设置from或者to, 也可以同时设置from和to。
当接口生效, 设置的from处于紧邻的step整数倍的值之间, 则from实际取左区间step整数倍的那个值或者MIN作为修正后的值。
当接口生效, 设置的to处于紧邻的step整数倍的值之间, 则to实际取右区间step整数倍的那个值或者MAX作为修正后的值。
在from和to取修正值后, 当value是undefined或null时, 其取值与from一致; 当value是数值型, 且value <= from, 则取from; value > to, 则取to。

事件

支持通用事件外，还支持以下事件：

onChange

onChange(callback: (value: number, mode: SliderChangeMode) => void)

Slider拖动或点击时触发事件回调。

Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变化时触发。

当连贯动作为拖动动作时，不触发Click状态。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	number	是	当前滑动进度值，变化范围为对应步长steps数组。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。
mode	SliderChangeMode	是	事件触发的相关状态值。

SliderChangeMode枚举说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开

名称	值	说明
Begin	0	手势/鼠标接触或者按下滑块。
Moving	1	正在拖动滑块过程中。
End	2	手势/鼠标离开滑块。说明：异常值恢复成默认值时触发，即value设置小于min或大于max。
Click⁸⁺	3	点击滑动条使滑块位置移动。

SliderConfiguration¹²⁺对象说明

开发者需要自定义class实现ContentModifier接口。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开

名称	类型	只读	可选	说明
value	number	否	否	当前进度值。
min	number	否	否	最小值。
max	number	否	否	最大值。
step	number	否	否	Slider滑动步长。
triggerChange	SliderTriggerChangeCallback	否	否	触发Slider变化。

SliderTriggerChangeCallback¹²⁺

type SliderTriggerChangeCallback = (value: number, mode: SliderChangeMode) => void

定义SliderConfiguration中使用的回调类型。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	只读	可选	说明
value	number	否	否	设置当前的进度值。
mode	SliderChangeMode	否	否	设置事件触发的相关状态值。

示例

示例1（滑动条基础样式）

该示例通过配置style、showTips、showSteps控制气泡、刻度值、滑块和滑轨的显示。

收起
自动换行
深色代码主题
复制
// xxx.ets
@Entry
@Component
struct SliderExample {
  @State outSetValueOne: number = 40
  @State inSetValueOne: number = 40
  @State noneValueOne: number = 40
  @State outSetValueTwo: number = 40
  @State inSetValueTwo: number = 40
  @State vOutSetValueOne: number = 40
  @State vInSetValueOne: number = 40
  @State vOutSetValueTwo: number = 40
  @State vInSetValueTwo: number = 40

  build() {
    Column({ space: 8 }) {
      Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
          value: this.outSetValueOne,
          min: 0,
          max: 100,
          style: SliderStyle.OutSet
        })
          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.outSetValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        // toFixed(0)将滑动条返回值处理为整数精度
        Text(this.outSetValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')
      Row() {
        Slider({
          value: this.outSetValueTwo,
          step: 10,
          style: SliderStyle.OutSet
        })
          .showSteps(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.outSetValueTwo = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
      }
      .width('80%')

      Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
          value: this.inSetValueOne,
          min: 0,
          max: 100,
          style: SliderStyle.InSet
        })
          .blockColor('#191970')
          .trackColor('#ADD8E6')
          .selectedColor('#4169E1')
          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.inSetValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        Text(this.inSetValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')
      Row() {
        Slider({
          value: this.inSetValueTwo,
          step: 10,
          style: SliderStyle.InSet
        })
          .blockColor('#191970')
          .trackColor('#ADD8E6')
          .selectedColor('#4169E1')
          .showSteps(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.inSetValueTwo = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
      }
      .width('80%')

      Text('none slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
          value: this.noneValueOne,
          min: 0,
          max: 100,
          style: SliderStyle.NONE
        })
          .blockColor('#191970')
          .trackColor('#ADD8E6')
          .selectedColor('#4169E1')
          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.noneValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        Text(this.noneValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')

      Row() {
        Column() {
          Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
          Row() {
            Text().width('10%')
            Slider({
              value: this.vOutSetValueOne,
              style: SliderStyle.OutSet,
              direction: Axis.Vertical
            })
              .blockColor('#191970')
              .trackColor('#ADD8E6')
              .selectedColor('#4169E1')
              .showTips(true)
              .onChange((value: number, mode: SliderChangeMode) => {
                this.vOutSetValueOne = value
                console.info('value:' + value + 'mode:' + mode.toString())
              })
            Slider({
              value: this.vOutSetValueTwo,
              step: 10,
              style: SliderStyle.OutSet,
              direction: Axis.Vertical
            })
              .blockColor('#191970')
              .trackColor('#ADD8E6')
              .selectedColor('#4169E1')
              .showSteps(true)
              .onChange((value: number, mode: SliderChangeMode) => {
                this.vOutSetValueTwo = value
                console.info('value:' + value + 'mode:' + mode.toString())
              })
          }
        }.width('50%').height(300)

        Column() {
          Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
          Row() {
            Slider({
              value: this.vInSetValueOne,
              style: SliderStyle.InSet,
              direction: Axis.Vertical,
              reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
            })
              .showTips(true)
              .onChange((value: number, mode: SliderChangeMode) => {
                this.vInSetValueOne = value
                console.info('value:' + value + 'mode:' + mode.toString())
              })
            Slider({
              value: this.vInSetValueTwo,
              step: 10,
              style: SliderStyle.InSet,
              direction: Axis.Vertical,
              reverse: true
            })
              .showSteps(true)
              .onChange((value: number, mode: SliderChangeMode) => {
                this.vInSetValueTwo = value
                console.info('value:' + value + 'mode:' + mode.toString())
              })
          }
        }.width('50%').height(300)
      }
    }.width('100%')
  }
}

示例2（设置滑动条样式）

该示例通过blockBorderColor、blockSize、blockBorderWidth、blockStyle设置滑块的样式，通过stepSize、stepColor设置刻度值的样式，通过trackBorderRadius设置底板的圆角，通过selectedBorderRadius设置已滑动部分的圆角。

收起
自动换行
深色代码主题
复制
@Entry
@Component
struct SliderExample {
  @State tipsValue: number = 40

  build() {
    Column({ space: 8 }) {
      Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.OutSet, value: 40 })
        .blockSize({ width: 40, height: 40 })
        .blockBorderColor(Color.Red)
        .blockBorderWidth(5)
      Divider()
      Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.InSet, value: 40, step: 10 })
        .showSteps(true)
        .stepSize(8)
        .stepColor(Color.Yellow)
      Divider()
      Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.InSet, value: 40 })
        .trackBorderRadius(2)
      Divider()
      Text('selected').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.InSet, value: 40 })
        .selectedBorderRadius(2)
      Divider()
      Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.OutSet, value: 40 })
        .blockStyle({ type: SliderBlockType.DEFAULT })
      Slider({ style: SliderStyle.OutSet, value: 40 })
        .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') })
      Slider({ style: SliderStyle.OutSet, value: 40 })
        .blockSize({ width: '60px', height: '60px' })
        .blockColor(Color.Red)
        .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) })
      Divider()
      Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.InSet, value: this.tipsValue })
        .showTips(true, this.tipsValue.toFixed())
        .onChange(value => {
          this.tipsValue = value
        })
    }
  }
}

示例3（自定义滑动条）

该示例实现了Slider组件通过样式Builder定制内容区。点击增加按钮，进度条会按照原Slider设置的步长增加，反之点减少按钮进度条会减少，并触发原组件的onChange事件。

收起
自动换行
深色代码主题
复制
// xxx.ets

@Builder function buildSlider(config: SliderConfiguration) {
  Row() {
    Column({space: 30}) {
      Progress({value: config.value, total: config.max, type:ProgressType.Ring})
        .margin({ top:20 })

      Button('增加').onClick(() => {
        config.value = config.value + config.step
        config.triggerChange(config.value, SliderChangeMode.Click)
      })
        .width(100)
        .height(25)
        .fontSize(10)
        .enabled(config.value<config.max)

      Button('减少').onClick(() => {
        config.value=config.value-config.step
        config.triggerChange(config.value, SliderChangeMode.Click)
      })
        .width(100)
        .height(25)
        .fontSize(10)
        .enabled(config.value>config.min)

      Slider({
        value: config.value,
        min: config.min,
        max: config.max,
        step:config.step,
      })
        .width(config.max)
        .visibility((config.contentModifier as MySliderStyle).showSlider?Visibility.Visible:Visibility.Hidden)
        .showSteps(true)
        .onChange((value: number, mode: SliderChangeMode) => {
          config.triggerChange(value, mode)
        })
      Text('当前状态：'+ ((config.contentModifier as MySliderStyle).sliderChangeMode==0?"Begin"
        :((config.contentModifier as MySliderStyle).sliderChangeMode==1?"Moving"
          :((config.contentModifier as MySliderStyle).sliderChangeMode==2?"End"
            :((config.contentModifier as MySliderStyle).sliderChangeMode==3?"Click":"无")))))
        .fontSize(10)
      Text('进度值：'+ config.value)
        .fontSize(10)
      Text('最小值：'+ config.min)
        .fontSize(10)
      Text('最大值：'+ config.max)
        .fontSize(10)
      Text('步长：'+ config.step)
        .fontSize(10)
    }
    .width('80%')

  }
  .width('100%')
}

class MySliderStyle implements ContentModifier<SliderConfiguration> {
  showSlider:boolean=true
  sliderChangeMode:number=0
  constructor(showSlider: boolean,sliderChangeMode:number) {
    this.showSlider = showSlider
    this.sliderChangeMode = sliderChangeMode
  }
  applyContent() : WrappedBuilder<[SliderConfiguration]> {
    return wrapBuilder(buildSlider)
  }
}


@Entry
@Component
struct SliderExample {
  @State showSlider:boolean=true
  @State sliderValue: number = 0
  @State sliderMin: number = 10
  @State sliderMax: number = 100
  @State sliderStep: number = 20
  @State sliderChangeMode: number = 0

  build() {
    Column({ space: 8 }) {

      Row() {
        Slider({
          value: this.sliderValue,
          min: this.sliderMin,
          max: this.sliderMax,
          step:this.sliderStep,
        })
          .showSteps(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.sliderValue = value
            this.sliderChangeMode=mode
            console.info('【SliderLog】value:' + value + 'mode:' + mode.toString())
          })
          .contentModifier(new MySliderStyle(this.showSlider,this.sliderChangeMode))

      }
      .width('100%')

    }.width('100%')
  }
}

Slider

子组件

接口

SliderOptions对象说明

SliderStyle枚举说明

属性

blockColor

trackColor

selectedColor

showSteps

showTips

trackThickness8+

blockBorderColor10+

blockBorderWidth10+

stepColor10+

trackBorderRadius10+

selectedBorderRadius12+

blockSize10+

blockStyle10+

stepSize10+

minLabel(deprecated)

maxLabel(deprecated)

sliderInteractionMode12+

minResponsiveDistance12+

contentModifier12+

slideRange12+

SliderBlockStyle10+对象说明

SliderBlockType10+枚举说明

SliderInteraction12+枚举说明

SlideRange12+对象说明

事件

onChange

SliderChangeMode枚举说明

SliderConfiguration12+对象说明

SliderTriggerChangeCallback12+

示例

示例1（滑动条基础样式）

示例2（设置滑动条样式）

示例3（自定义滑动条）

trackThickness⁸⁺

blockBorderColor¹⁰⁺

blockBorderWidth¹⁰⁺

stepColor¹⁰⁺

trackBorderRadius¹⁰⁺

selectedBorderRadius¹²⁺

blockSize¹⁰⁺

blockStyle¹⁰⁺

stepSize¹⁰⁺

minLabel^(deprecated)

maxLabel^(deprecated)

sliderInteractionMode¹²⁺

minResponsiveDistance¹²⁺

contentModifier¹²⁺

slideRange¹²⁺

SliderBlockStyle¹⁰⁺对象说明

SliderBlockType¹⁰⁺枚举说明

SliderInteraction¹²⁺枚举说明

SlideRange¹²⁺对象说明

SliderConfiguration¹²⁺对象说明

SliderTriggerChangeCallback¹²⁺