Slider

滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

说明：
开发前请熟悉鸿蒙开发指导文档 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})

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

参数：

参数名	参数类型	必填	参数描述
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]说明：设置小于0或百分比的值时，按默认值显示。
style	[SliderStyle]	否	设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSet
direction8+	[Axis]	否	设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal
reverse8+	boolean	否	设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。默认值：false

SliderStyle枚举说明

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

名称	描述
OutSet	滑块在滑轨上。
InSet	滑块在滑轨内。

属性

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

名称	参数类型	描述
blockColor	[ResourceColor]	设置滑块的颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：当滑块形状设置为`SliderBlockType.DEFAULT`时，`blockColor`可设置默认圆形滑块颜色；当滑块形状设置为`SliderBlockType.IMAGE`时，滑块无填充，设置`blockColor`不生效；当滑块形状设置为`SliderBlockType.SHAPE`时，`blockColor`可设置自定义形状的填充颜色。
trackColor	[ResourceColor]	设置滑轨的背景颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
selectedColor	[ResourceColor]	设置滑轨的已滑动部分颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
showSteps	boolean	设置当前是否显示步长刻度值。默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。
showTips	value: boolean, content10+?: [ResourceStr]	value：设置滑动时是否显示气泡提示。默认值：false content：设置气泡提示的文本内容，默认显示当前百分比。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：当direction的值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。 tip的绘制区域为Slider自身节点的overlay。 Slider不设置边距或者边距比较小时，tip会被截断。
trackThickness	[Length]	设置滑轨的粗细。默认值：当参数style的值设置[SliderStyle].OutSet 时为 4.0vp，[SliderStyle].InSet时为20.0vp 从APIversion9开始，该接口支持在ArkTS卡片中使用。说明：设置为小于等于0的值时，按默认值显示。
blockBorderColor10+	[ResourceColor]	设置滑块描边颜色。说明：当滑块形状设置为`SliderBlockType.DEFAULT`时，`blockBorderColor`可设置默认圆形滑块描边颜色；当滑块形状设置为`SliderBlockType.IMAGE`时，滑块无描边，设置`blockBorderColor`不生效；当滑块形状设置为`SliderBlockType.SHAPE`时，`blockBorderColor`可设置自定义形状中线的颜色。
blockBorderWidth10+	[Length]	设置滑块描边粗细。说明：当滑块形状设置为`SliderBlockType.DEFAULT`时，`blockBorderWidth`可设置默认圆形滑块描边粗细；当滑块形状设置为`SliderBlockType.IMAGE`时，滑块无描边，设置`blockBorderWidth`不生效；当滑块形状设置为`SliderBlockType.SHAPE`时，`blockBorderWidth`可设置自定义形状中线的粗细。
stepColor10+	[ResourceColor]	设置刻度颜色。
trackBorderRadius10+	[Length]	设置底板圆角半径。
blockSize10+	[SizeOptions]	设置滑块大小。
blockStyle10+	[SliderBlockStyle]	设置滑块形状参数。
stepSize10+	[Length]	设置刻度大小（直径）。

SliderBlockStyle10+对象说明

Slider组件滑块形状参数。

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

SliderBlockType10+枚举说明

Slider组件滑块形状枚举。

名称	描述
DEFAULT	使用默认滑块（圆形）。
IMAGE	使用图片资源作为滑块。
SHAPE	使用自定义形状作为滑块。

事件

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

名称	功能描述
onChange(callback: (value: number, mode: SliderChangeMode) => void)	Slider拖动或点击时触发事件回调。 value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。 mode：事件触发的相关状态值。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变化时触发。当连贯动作为拖动动作时，不触发Click状态。 value值的变化范围为对应步长steps数组。

名称

功能描述

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

Slider拖动或点击时触发事件回调。 value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。 mode：事件触发的相关状态值。从API version 9开始，该接口支持在ArkTS卡片中使用。**说明：**Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变化时触发。当连贯动作为拖动动作时，不触发Click状态。 value值的变化范围为对应步长steps数组。

SliderChangeMode枚举说明

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

名称	值	描述
Begin	0	手势/鼠标接触或者按下滑块。
Moving	1	正在拖动滑块过程中。
End	2	手势/鼠标离开滑块。
Click	3	点击滑动条使滑块位置移动。`HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿`

搜狗高速浏览器截图20240326151547.png

示例

示例1

// xxx.ets
@Entry
@Component
struct SliderExample {
  @State outSetValueOne: number = 40
  @State inSetValueOne: 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%')

      Row() {
        Column() {
          Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
          Row() {
            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%')
  }
}

zh-cn_image_0000001179613854

示例2

@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('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, 'value:' + this.tipsValue.toFixed())
        .onChange(value = > {
          this.tipsValue = value
        })
    }
  }
}

slider_2

审核编辑黄宇

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。举报投诉

组件

组件

+关注

关注
1

文章
503

浏览量
17782
鸿蒙

鸿蒙

+关注

关注
57

文章
2301

浏览量
42673

HarmonyOS开发案例：【基础组件Slider的使用】

学习如何使用声明式UI编程框架的基础组件。本篇Codelab将会使用Image组件、Slider组件

发表于 05-10 16:01 •627次阅读

HarmonyOS/OpenHarmony应用开发-ArkTS的声明式开发范式

轨迹。状态与数据管理状态数据管理作为基于ArkTS的声明式开发范式的特色，通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态，两者协

发表于 01-17 15:09

HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Slider

滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。该组件从API Version 7开始支持。无子组件一、接口 Slider(options?: {value?:

发表于 10-18 15:39

鸿蒙ArkTS声明式组件：Blank

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。

发表于 06-19 16:21 •486次阅读

鸿蒙ArkTS声明式组件：Marquee

跑马灯组件，用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动，不超过时不滚动。

发表于 06-25 15:52 •369次阅读

鸿蒙ArkTS声明式组件：NavDestination

作为NavRouter组件的子组件，用于显示导航内容区。

发表于 06-27 14:05 •399次阅读

鸿蒙ArkTS声明式组件：PatternLock

图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态，手指离开屏幕时结束输入状态完成密码输入。

发表于 06-27 09:59 •368次阅读

鸿蒙ArkTS声明式组件：【RichText】

富文本组件，解析并显示HTML格式文本。

发表于 06-29 09:35 •572次阅读

鸿蒙ArkTS声明式组件：ScrollBar

滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。

发表于 07-01 15:52 •450次阅读

鸿蒙ArkTS声明式组件：Span

作为Text组件的子组件，用于显示行内文本的组件。

发表于 07-01 09:14 •392次阅读

鸿蒙ArkTS声明式组件：StepperItem

用作[Stepper]组件的页面子组件。

发表于 07-02 17:47 •353次阅读

鸿蒙ArkTS声明式组件：TextArea

多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。

发表于 07-02 15:02 •515次阅读

鸿蒙ArkTS声明式组件：TextInput

单行文本输入框组件。

发表于 07-03 09:14 •741次阅读

鸿蒙ArkTS声明式组件：TextPicker

滑动选择文本内容的组件。

发表于 07-03 15:07 •338次阅读

鸿蒙ArkTS声明式组件：XComponent

可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。

发表于 07-05 09:56 •537次阅读

搜索历史

鸿蒙ArkTS声明式组件：Slider

Slider

子组件

接口

SliderStyle枚举说明

属性

SliderBlockStyle10+对象说明

SliderBlockType10+枚举说明

事件

SliderChangeMode枚举说明

示例

示例1

示例2

评论

HarmonyOS开发案例：【基础组件Slider的使用】

HarmonyOS/OpenHarmony应用开发-ArkTS的声明式开发范式

HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Slider

鸿蒙ArkTS声明式组件：Blank

鸿蒙ArkTS声明式组件：Marquee

鸿蒙ArkTS声明式组件：NavDestination

鸿蒙ArkTS声明式组件：PatternLock

鸿蒙ArkTS声明式组件：【RichText】

鸿蒙ArkTS声明式组件：ScrollBar

鸿蒙ArkTS声明式组件：Span

鸿蒙ArkTS声明式组件：StepperItem

鸿蒙ArkTS声明式组件：TextArea

鸿蒙ArkTS声明式组件：TextInput

鸿蒙ArkTS声明式组件：TextPicker

鸿蒙ArkTS声明式组件：XComponent