数值滑动条

更新时间：2021-12-16 03:45:30

NumberSlider

示图展示

组件属性

字段名	类型	描述	默认值
value	Number	当前值	0
min	Number	允许滑动的最小值	0
max	Number	允许滑动的最大值	1000
step	Number	滑动时的步长	1
disabled	Bool	是否禁用	false
trackColor	String	轨道颜色	‘rgba(0,0,0,.4)’
tintColor	String	激活的轨道颜色	‘#fff’
invalidSwipeDistance	Number	滑动生效的开始距离	7
clickEnabled	Bool	是否可以点击选择	true
trackSlideEnabled	Bool	是否可以能过轨道直接滑动	false
showTint	Bool	是否显示激活轨道	true
direction	String	滑动方向 ‘horizontal’ 或 ‘vertical’	‘horizontal’
reverse	Bool	是否反向滑动当为水平滑动条时，默认滑条的最小值在左边，设置reverse = true后，最小值在右边当为垂直滑动条时，默认滑条的最小值在下边，设置reverse = true后，最小值在上边	false
showAnimation	Bool	使用动画显示	true
thumbTouchSize	Obj	拖动时，滑动的有效触控区大小	{ width: 40, height: 40 }
accessibilityLabel	String	测试标位	‘numberSlider’
thumbLimitType	String	滑块的可滑动范围类型 inner 为滑动范围为滑块内，滑动不会超出轨道的范围 outer 为滑动范围可超出轨道范围，滑动时滑块中心位置可与轨道的边重叠	‘inner’
onGrant	Func	滑动开始事件	无
onMove	Func	滑动中事件	无
onRelease	Func	滑动结束事件	无
onPress	Func	点击事件当 clickEnabled = true时，有效	无
onChange	Func	值改变时间用户主动交互时，如果滑动条的数据值有变化，会触发此事件	无
onThumbChange	Func	滑块变动时触发事件，回调包含两个参数offset, value offset为滑块的相对轨道最小值一端的偏移量 value为滑块位置对应的数据值	无

使用示例

import React, { Component } from 'react';
import { View } from 'react-native';
import { NumberSlider } from '@tuya/tuya-panel-lamp-sdk';
 
export default class Scene extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <NumberSlider value={800} onMove={v => console.log('onMove', v)} />
      </View>
    );
  }
}

上一篇倒计时选择器

下一篇标度数值滑动条