IBest-UI

Appearance

Slider 滑块 ​

介绍 ​

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

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

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,
        ticks: true,
        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("100%")
    .height(300)
    .justifyContent(FlexAlign.Center)
  }
}

API ​

@Props ​

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

插槽 ​

插槽名说明类型
customButton自定义第一个滑块CustomBuilder
customSecondButton自定义第二个滑块CustomBuilder

Events ​

事件名说明事件类型
onChange结束触摸时触发(value: IBestSliderValue) => void
onTouchStart 2.2.0开始触摸时触发(value: IBestSliderValue) => void
onTouchMove 2.2.0触摸中时触发(value: IBestSliderValue) => void
onTouchEnd 2.2.0结束触摸时触发(value: IBestSliderValue) => void

主题定制 ​

组件提供了下列颜色变量，可用于自定义深色/浅色模式样式，使用方法请参考 颜色模式 章节，如需要其它颜色变量可提 issue。

名称描述默认值
ibest_slider_inactive_background进度条背景颜色#ebedf0