IBest-UI@HarmonyOS

Appearance

Slider 滑块 ​

介绍 ​

滑动输入条，用于在给定的范围内选择一个值。

引入 ​

ts
import { IBestSlider } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 30
  build() {
    Column(){
      IBestSlider({
        value: $value,
        onChange: (val) => {
          console.log(val.toString())
        }
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

双滑块 ​

双滑块

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: [number, number] = [20, 60]
  build() {
    Column(){
      IBestSlider({
        value: $value,
        onChange: (val) => {
          console.log(val.toString())
        }
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

指定选择范围 ​

指定选择范围

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 30
  build() {
    Column(){
      IBestSlider({
        value: $value,
        min: -50,
        max: 50,
        onChange: (val) => {
          console.log(val.toString())
        }
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

禁用 ​

禁用

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 30
  build() {
    Column(){
      IBestSlider({
        value: $value,
        disabled: true
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

指定步长 ​

指定步长

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 30
  build() {
    Column(){
      IBestSlider({
        value: $value,
        step: 10,
        onChange: (val) => {
          console.log(val.toString())
        }
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 30
  build() {
    Column(){
      IBestSlider({
        value: $value,
        barHeight: 8,
        activeColor: "#ee0a24",
        onChange: (val) => {
          console.log(val.toString())
        }
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

自定义按钮 ​

自定义按钮

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 30
  @Builder customBtn(){
    Text(this.value.toString())
      .height(18)
      .borderRadius(9999)
      .padding({ left: 5, right: 5 })
      .backgroundColor("#006AE9")
      .fontColor("#FFFFFF")
      .fontSize(12)
  }
  build() {
    Column(){
      IBestSlider({
        value: $value,
        customButton: (): void => this.customBtn(),
        onChange: (val) => {
          console.log(val.toString())
        }
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

垂直方向 ​

垂直方向

TIP

通过 reverse 属性可以设置换向。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 30
  @State value1: [number, number] = [20, 60]
  
  build() {
    Row({ space: 80 }){
      Row({ space: 30 }){
        IBestSlider({
          value: $value,
          vertical: true,
          onChange: (val) => {
            console.log(val.toString())
          }
        })
        IBestSlider({
          value: $value,
          vertical: true,
          reverse: true,
          onChange: (val) => {
            console.log(val.toString())
          }
        })
      }
      Row({ space: 30 }){
        IBestSlider({
          value: $value1,
          vertical: true,
          onChange: (val) => {
            console.log(val.toString())
          }
        })
        IBestSlider({
          value: $value1,
          vertical: true,
          reverse: true,
          onChange: (val) => {
            console.log(val.toString())
          }
        })
      }
    }
    .width(CONTAINER_SIZE.FULL)
    .height(300)
    .justifyContent(FlexAlign.Center)
  }
}

API ​

@Props ​

参数说明类型默认值
value滑动条当前值，支持双向绑定number | [number, number]-
max最大值number100
min最小值number0
step步长number1
barHeight进度条高度number | string2
buttonSize滑块大小, 宽高一致number | string24
activeColor进度条激活态颜色ResourceColor#3D8AF2
barBgColor进度条背景色ResourceColor#ebedf0
disabled是否禁用booleanfalse
vertical是否垂直展示booleanfalse
reverse是否换向booleanfalse
customButton自定义滑块CustomBuilder-
buttonBgColor滑块背景颜色ResourceColor#fff

Events ​

事件名说明回调参数
onChange进度变化且拖动结束后触发value: IBestSliderValue