Slider 滑块

介绍

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

TIP

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

引入

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

代码演示

基础用法

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 30
  build() {
    Column(){
      IBestSlider({
        value: this.value!!,
        onChange: (val) => {
          console.log(val.toString())
        }
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

双滑块

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local value: [number, number] = [20, 60]
  build() {
    Column(){
      IBestSlider({
        value: this.value!!,
        onChange: (val) => {
          console.log(val.toString())
        }
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

指定选择范围

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 30
  build() {
    Column(){
      IBestSlider({
        value: this.value!!,
        min: -50,
        max: 50,
        onChange: (val) => {
          console.log(val.toString())
        }
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

禁用

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 30
  build() {
    Column(){
      IBestSlider({
        value: this.value!!,
        disabled: true
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

指定步长

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 30
  build() {
    Column(){
      IBestSlider({
        value: this.value!!,
        step: 10,
        ticks: true,
        onChange: (val) => {
          console.log(val.toString())
        }
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

自定义样式

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 30
  build() {
    Column(){
      IBestSlider({
        value: this.value!!,
        barHeight: 8,
        activeColor: "#ee0a24",
        onChange: (val) => {
          console.log(val.toString())
        }
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

自定义按钮

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local 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: this.value!!,
        customButton: (): void => this.customBtn(),
        onChange: (val) => {
          console.log(val.toString())
        }
      })
    }
    .padding({ left: 20, right: 20 })
  }
}

垂直方向

TIP

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

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 30
  @Local value1: [number, number] = [20, 60]
  build() {
    Row({ space: 80 }){
      Row({ space: 30 }){
        IBestSlider({
          value: this.value!!,
          vertical: true,
          onChange: (val) => {
            console.log(val.toString())
          }
        })
        IBestSlider({
          value: this.value!!,
          vertical: true,
          reverse: true,
          onChange: (val) => {
            console.log(val.toString())
          }
        })
      }
      Row({ space: 30 }){
        IBestSlider({
          value: this.value1!!,
          vertical: true,
          onChange: (val) => {
            console.log(val.toString())
          }
        })
        IBestSlider({
          value: this.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	最大值	number	100
min	最小值	number	0
step	步长	number	1
barHeight	进度条高度	string | number	2
buttonSize	滑块大小, 宽高一致	string | number	24
activeColor	进度条激活态颜色	ResourceColor	#3D8AF2
barBgColor	进度条背景色	ResourceColor	#ebedf0
disabled	是否禁用	boolean	false
vertical	是否垂直展示	boolean	false
reverse	是否换向	boolean	false
buttonBgColor	滑块背景颜色	ResourceColor	#fff
ticks 1.0.4	是否显示刻度点	boolean	false

插槽

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

Events

事件名	说明	事件类型
onChange	进度变化时触发	(value: IBestSliderValue) => void

主题定制

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

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