【鸿蒙next开发】JS组件：基础组件（slider）

最新推荐文章于 2025-08-05 16:44:26 发布

炫酷盖茨猫先生

最新推荐文章于 2025-08-05 16:44:26 发布

阅读量851

点赞数 12

CC 4.0 BY-SA版权

分类专栏： ArkTS组件 ArkUI框架鸿蒙5.0开发文章标签： harmonyos 华为 ArkUI android JS组件 ArkTS 鸿蒙系统

本文链接：https://blog.csdn.net/m0_73088370/article/details/148869936

鸿蒙5.0开发同时被 3 个专栏收录

1348 篇文章

订阅专栏

ArkTS组件

1129 篇文章

订阅专栏

ArkUI框架

976 篇文章

订阅专栏

往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

slider

滑动条组件，用来快速调节设置值，如音量、亮度等。

说明

该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

不支持。

属性

名称	类型	默认值	必填	描述
min	number	0	否	滑动选择器的最小值。
max	number	100	否	滑动选择器的最大值。
value	number	0	否	滑动选择器的初始值。
id	string	-	否	组件的唯一标识。
style	string	-	否	组件的样式声明。
class	string	-	否	组件的样式类，用于引用样式表。
ref	string	-	否	用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。

事件

名称	参数	描述
change	ChangeEvent	选择值发生变化时触发该事件。
click	-	点击动作触发该事件。
longpress	-	长按动作触发该事件。
swipe5+	SwipeEvent	组件上快速滑动后触发。

表1 ChangeEvent

属性	类型	说明
progress(deprecated5+)	string	当前slider的进度值。
value5+	number	当前slider的进度值。

样式

名称	类型	默认值	必填	描述
color	<color>	#000000	否	滑动条的背景颜色。
selected-color	<color>	#ffffff	否	滑动条的已选择颜色。
width	<length> \| <percentage>5+	-	否	设置组件自身的宽度。未设置时组件宽度默认为0。
height	<length> \| <percentage>5+	-	否	设置组件自身的高度。未设置时组件高度默认为0。
padding	<length>	0	否	使用简写属性设置所有的内边距属性。该属性可以有1到4个值： - 指定一个值时，该值指定四个边的内边距。 - 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。 - 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。 - 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。
padding-[left\|top\|right\|bottom]	<length>	0	否	设置左、上、右、下内边距属性。
margin	<length> \| <percentage>5+	0	否	使用简写属性设置所有的外边距属性，该属性可以有1到4个值。 - 只有一个值时，这个值会被指定给全部的四个边。 - 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。 - 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。 - 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。
margin-[left\|top\|right\|bottom]	<length> \| <percentage>5+	0	否	设置左、上、右、下外边距属性。
border-width	<length>	0	否	使用简写属性设置元素的所有边框宽度。
border-color	<color>	black	否	使用简写属性设置元素的所有边框颜色。
border-radius	<length>	-	否	border-radius属性是设置元素的外边框圆角半径。
background-color	<color>	-	否	设置背景颜色。
display	string	flex	否	确定一个元素所产生的框的类型，可选值为： - flex：弹性布局。 - none：不渲染此元素。
[left\|top]	<length> \| <percentage>6+	-	否	left\|top确定元素的偏移位置。 - left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。 - top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

示例

<!-- xxx.hml -->
<div class="container">
    <text>slider start value is {{startValue}}</text>
    <text>slider current value is {{currentValue}}</text>
    <text>slider end value is {{endValue}}</text>
    <slider min="0" max="100" value="{{value}}" onchange="setValue" style="margin-top: 10%; width: 80%;height: 1%"></slider>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

// xxx.js
export default {
    data: {
        value: 34,
        startValue: 0,
        currentValue: 0,
        endValue: 100,
    },
    setValue(e) {
        this.currentValue = e.value;
    }
}