ArkUI Slider：数值一滑动，范围感马上出来

这篇我们看 Slider。

有些设置不是“开或关”，也不是“选 A 或 B”，而是在一个范围里调节。音量、亮度、字号、透明度，这类场景就适合 Slider。

这个 Demo 只展示 Slider 本身：最小值、最大值、步进、颜色、提示和禁用态。不写实时数值刷新，也不把它提前拉进状态管理章节。

参考文档：

• https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui
• https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-development

范围先写清楚

Slider 的核心参数在创建时就能给出来。

Slider({ value: 60, min: 0, max: 100, step: 5 })

value 是当前值，min 和 max 是边界，step 是每次滑动变化多少。

边界很重要。用户看到 60，得知道它是 60 分贝、60%、还是 60 级。案例里配了左右标签，让范围感更明确。

颜色负责状态感

常用的三个颜色是：

.selectedColor('#2563EB')
.trackColor('#BFDBFE')
.blockColor('#FFFFFF')

selectedColor 是已经走过的轨道，trackColor 是剩余轨道，blockColor 是滑块颜色。

颜色别都用同一个深色。已选部分强一点，未选部分轻一点，滑块保持清楚，整体就不会乱。

step 决定手感

字号这种场景，不一定要每次加 1。

Slider({ value: 16, min: 12, max: 24, step: 2 })

步进大一点，用户反而更容易调到合理值。不是所有数值都要给精细控制。

禁用态收住就好

Slider({ value: 40, min: 0, max: 100, step: 10 })
  .enabled(false)

禁用态不要只看滑块本身。旁边的标题、描述和数值也要一起变弱，用户才知道这一整项都不能改。

打开案例页时，可以看三处：范围是否清楚，步进是否符合场景，禁用态是否完整。你项目里有没有那种用加减按钮硬调数值的地方？如果它本质是范围调节，Slider 往往会更顺手。

完整示例代码

文件位置：entry/src/main/ets/pages/arkUI/basic/ArkUISliderDemo.ets

@Entry
@Component
struct ArkUISliderDemo {
  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 4 }) {
      Text(title)
        .width('100%')
        .fontSize(16)
        .fontWeight(700)
        .fontColor('#0F172A')

      Text(desc)
        .width('100%')
        .fontSize(13)
        .fontColor('#64748B')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  sliderBlock(title: string, desc: string, value: number, min: number, max: number, step: number, selectedColor: string,
    trackColor: string, blockColor: string, enabled: boolean) {
    Column({ space: 10 }) {
      Row() {
        Text(title)
          .fontSize(15)
          .fontWeight(700)
          .fontColor(enabled ? '#0F172A' : '#94A3B8')
          .layoutWeight(1)

        Text(value.toString())
          .fontSize(14)
          .fontWeight(700)
          .fontColor(enabled ? selectedColor : '#94A3B8')
      }
      .width('100%')

      Text(desc)
        .width('100%')
        .fontSize(12)
        .fontColor(enabled ? '#64748B' : '#94A3B8')
        .lineHeight(18)

      Slider({ value: value, min: min, max: max, step: step })
        .selectedColor(selectedColor)
        .trackColor(trackColor)
        .blockColor(blockColor)
        .showTips(true, value.toString())
        .minLabel(min.toString())
        .maxLabel(max.toString())
        .enabled(enabled)
    }
    .width('100%')
    .padding(14)
    .backgroundColor(enabled ? '#FFFFFF' : '#F1F5F9')
    .border({ width: 1, color: enabled ? trackColor : '#CBD5E1' })
    .borderRadius(8)
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI Slider')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('数值一滑动，范围感马上出来')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('这一页只看 Slider 自己：最小值、最大值、步进、颜色、提示和禁用态。不写实时刷新，也不讲状态管理。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('先把范围交代清楚', 'Slider 适合调节一个连续范围，比如音量、亮度、字号。左右边界要让人看得见。')

          this.sliderBlock('音量', '0 到 100，每次滑动按 5 递增。', 60, 0, 100, 5, '#2563EB', '#BFDBFE', '#FFFFFF', true)
          this.sliderBlock('屏幕亮度', '同样是 0 到 100，但颜色可以跟场景走。', 75, 0, 100, 5, '#C2410C', '#FED7AA', '#FFFFFF', true)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#EFF6FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('步进决定手感', '不是所有数值都需要精确到 1。像字号这种场景，步进大一点反而更好控制。')

          this.sliderBlock('正文字号', '12 到 24，每次调整 2 个单位。', 16, 12, 24, 2, '#7C3AED', '#DDD6FE', '#FFFFFF', true)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F5F3FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('禁用态别让人误会', '数值暂时不能调时，把滑块和文案一起收住。')

          this.sliderBlock('企业默认音量', '管理员已统一设置，当前账号不能单独修改。', 40, 0, 100, 10, '#64748B', '#CBD5E1',
            '#FFFFFF', false)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F8FAFC')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}