滑块 Slider

滑块输入，提供默认值、可选范围等能力。

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-slider": "@titian-design/weapp/slider/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-slider": "platform://titian-mp/ti-slider"
  }
}

用法示例

单滑块

index.wxml

<ti-slider
  min="{{0}}"
  max="{{100}}"
  step="{{10}}"
  value="{{value}}"
  bind:change="onChangeHandler"
/>

index.js

Page({
  data: {
    value: 10
  },
  onChangeHandler(event){
    const { value } = event.detail;
    this.setData({
      value
    })
  }
})

双滑块

index.wxml

<ti-slider
  min="{{0}}"
  max="{{100}}"
  step="{{10}}"
  value="{{valueArr}}"
  bind:change="onChangeHandler"
/>

index.js

Page({
  data: {
    valueArr: [10, 20]
  },
  onChangeHandler(event){
    const { value } = event.detail;
    this.setData({
      valueArr: value
    })
  }
})

ti-slider API

属性 Properties

属性	类型	必填	默认值	说明	备注
value	number | number[]	是	100	最大值	-
max	number	否	100	最大值	-
min	number	否	100	最小值	-
step	number	否	1	步长	-
track-class	string	否	-	滑过轨迹样式类	-
rail-class	string	否	-	整体轨道样式类	-
thumb-class	string	否	-	滑块样式类	-

事件 Events

名称	参数列表	描述	备注
bind:change	(e: WechatMiniprogram.CustomEvent<value: number | number[]>) => void	滑动时触发的回调事件	-

外部样式类 External Classes

名称	说明	备注
track-class	轨道颜色类	-
rail-class	已滑动轨迹颜色类	-
thumb-class	滑块颜色类	-

CSS 变量 CSS Variables

CSS 变量	默认值	说明	备注
--slider-rail-bg-color	--brand-color 主题色的 10%	轨道颜色	-
--slider-track-bg-color	--brand-color 主题色	已滑动轨迹颜色	-
--slider-thumb-bg-color	#fff 白色	滑块颜色	-