Slider 滑块

介绍

滑块选择器，用于在给定的范围内选择一个值，支持自定义步长、颜色和尺寸。

引入

import { TnSlider } from "@tuniao/tn-ui";

代码演示

基础用法

通过 modelValue 绑定当前值，默认范围为 0 ~ 100。

点我查看代码

@Local sliderValue: number = 30;

TnSlider({
  modelValue: this.sliderValue,
  onChange: (value: number) => {
    this.sliderValue = value;
  },
})

步长

通过 step 属性设置滑块的步长，每次移动的最小单位。

点我查看代码

@Local sliderValue: number = 50;

TnSlider({
  modelValue: this.sliderValue,
  step: 10,
  min: 0,
  max: 200,
  onChange: (value: number) => {
    this.sliderValue = value;
  },
})

自定义颜色

通过 activeColor 设置已选择部分的颜色，inactiveColor 设置未选择部分的颜色。

点我查看代码

@Local sliderValue: number = 40;

TnSlider({
  modelValue: this.sliderValue,
  activeColor: "success",
  onChange: (value: number) => {
    this.sliderValue = value;
  },
})

自定义尺寸

通过 sliderBarSize 设置滑块按钮大小，sliderHeight 设置轨道高度。

点我查看代码

@Local sliderValue: number = 40;

Column({ space: 20 }) {
  // 大滑块
  TnSlider({
    modelValue: this.sliderValue,
    sliderBarSize: 28,
    sliderHeight: 8,
    onChange: (value: number) => {
      this.sliderValue = value;
    },
  })
  // 小滑块
  TnSlider({
    modelValue: this.sliderValue,
    sliderBarSize: 16,
    sliderHeight: 2,
    onChange: (value: number) => {
      this.sliderValue = value;
    },
  })
}

禁用状态

通过 disabled 属性禁用滑块。

点我查看代码

TnSlider({
  modelValue: 50,
  disabled: true,
})

API

Props

参数	说明	类型	默认值
modelValue	当前值	number	0
min	最小值	number	0
max	最大值	number	100
step	步长	number	1
disabled	是否禁用	boolean	false
activeColor	已选择部分的颜色	string	-
inactiveColor	未选择部分的颜色	string	-
sliderBarSize	滑块按钮大小，单位 vp	number	-
sliderHeight	轨道高度，单位 vp	number	-

Events

事件名	说明	回调参数
onChange	松手后触发，确认最终值	(value: number) => void
onChanging	拖动过程中实时触发	(value: number) => void