Slider 滑动选择器

Slider 是滑动选择器,一般在面板内部用于处理可上报下发的数值型 dp 点。

代码演示

水平滑动条 - 基础样式

import { Slider } from 'tuya-panel-kit'
const [value, setValue] = React.useState(25);
<Slider.Horizontal
theme={{
width: 318,
height: 6,
trackRadius: 3,
trackHeight: 6,
thumbSize: 26,
thumbRadius: 26,
thumbTintColor: '#FFF',
minimumTrackTintColor: '#F84803',
maximumTrackTintColor: '#E5E5E5',
}}
maximumValue={100}
minimumValue={0}
style={{ marginBottom: 10 }}
value={value}
onSlidingComplete={v => setValue(Math.round(v))}
/>

水平包裹类型滑动条

import { Slider } from 'tuya-panel-kit'
const [value, setValue] = React.useState(25);
<Slider.Horizontal
theme={{
width: 318,
height: 36,
trackRadius: 18,
trackHeight: 36,
thumbSize: 20,
thumbRadius: 20,
thumbTintColor: '#FFF',
minimumTrackTintColor: '#E5E5E5',
maximumTrackTintColor: '#E5E5E5',
}}
trackStyle={{
height: 35,
borderRadius: 18,
}}
maximumValue={100}
minimumValue={0}
thumbTouchSize={{ width: 36, height: 36 }}
value={value}
style={{ marginBottom: 10 }}
type="parcel"
renderMinimumTrack={() => (
<View
style={{
height: 27,
borderRadius: 15,
backgroundColor: '#F84803',
marginHorizontal: 3,
}}
/>
)}
onSlidingComplete={v => setValue(Math.round(v))}
/>

水平包裹自定义滑块滑动条

import { Slider } from 'tuya-panel-kit'
const [value, setValue] = React.useState(25);
<Slider.Horizontal
theme={{
width: 318,
height: 46,
trackRadius: 16,
trackHeight: 46,
thumbSize: 20,
thumbRadius: 20,
thumbTintColor: '#F84803',
minimumTrackTintColor: '#E5E5E5',
maximumTrackTintColor: '#E5E5E5',
}}
trackStyle={{
height: 35,
borderRadius: 8,
}}
value={value}
maximumValue={100}
minimumValue={0}
style={{ marginBottom: 10 }}
thumbTouchSize={{ width: 46, height: 46 }}
thumbStyle={{
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0,
justifyContent: 'center',
alignItems: 'flex-end',
}}
type="parcel"
renderMinimumTrack={() => (
<View
style={{
height: 27,
borderRadius: 8,
backgroundColor: '#F84803',
marginHorizontal: 4,
}}
/>
)}
renderThumb={() => (
<View
style={{
height: 14,
borderRadius: 5.5,
width: 3,
backgroundColor: '#FFF',
}}
/>
)}
onSlidingComplete={v => setValue(Math.round(v))}
/>

水平包裹带有刻度滑块

import { Slider } from 'tuya-panel-kit'
const [value, setValue] = React.useState(25);
<Slider.Horizontal
theme={{
width: 318,
height: 46,
trackRadius: 16,
trackHeight: 46,
thumbSize: 20,
thumbRadius: 20,
thumbTintColor: '#F84803',
minimumTrackTintColor: '#F84803',
maximumTrackTintColor: '#E5E5E5',
}}
trackStyle={{
height: 35,
borderRadius: 8,
}}
value={value}
style={{ marginBottom: 10 }}
thumbTouchSize={{ width: 46, height: 46 }}
stepValue={25}
thumbStyle={{
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0,
justifyContent: 'center',
alignItems: 'center',
}}
type="parcel"
useNoun={true}
maximumValue={100}
minimumValue={0}
minNounStyle={{ backgroundColor: 'white' }}
maxNounStyle={{ backgroundColor: '#F84803' }}
onSlidingComplete={v => setValue(Math.round(v))}
/>

水平有刻度滑动条

import { Slider } from 'tuya-panel-kit'
const [value, setValue] = React.useState(25);
<Slider.Horizontal
theme={{
width: 318,
height: 6,
trackRadius: 3,
trackHeight: 6,
thumbSize: 26,
thumbRadius: 26,
thumbTintColor: '#FFF',
minimumTrackTintColor: '#F84803',
maximumTrackTintColor: '#E5E5E5',
}}
trackStyle={{ height: 12, borderRadius: 8 }}
value={value}
stepValue={25}
useNoun={true}
thumbStyle={{ height: 22, width: 22 }}
minNounStyle={{
backgroundColor: 'white',
height: 5,
width: 5,
borderRadius: 2.5,
}}
maxNounStyle={{
backgroundColor: '#F84803',
height: 5,
width: 5,
borderRadius: 2.5,
}}
type="parcel"
maximumValue={100}
minimumValue={0}
onValueChange={value => setValue(value)}
/>

竖直滑动条

import { Slider } from 'tuya-panel-kit'
const [value, setValue] = React.useState(25);
{/* 1 */}
<Slider.Vertical
theme={{
thumbSize: 26,
thumbRadius: 26,
thumbTintColor: '#FFF',
minimumTrackTintColor: '#E5E5E5',
maximumTrackTintColor: '#F84803',
}}
maximumValue={100}
minimumValue={0}
reverseValue={true}
trackStyle={{ width: 6, height: 200, borderRadius: 3 }}
value={value}
onSlidingComplete={v => setValue(Math.round(v))}
/>
{/* 2 */}
<Slider.Vertical
theme={{
thumbSize: 20,
thumbRadius: 20,
thumbTintColor: '#FFF',
maximumTrackTintColor: '#E5E5E5',
minimumTrackTintColor: '#E5E5E5',
}}
type="parcel"
maximumValue={100}
minimumValue={0}
reverseValue={true}
trackStyle={{ width: 35, height: 200, borderRadius: 18 }}
style={{ marginHorizontal: 15 }}
value={value}
thumbTouchSize={{ width: 36, height: 36 }}
renderMinimumTrack={() => (
<View
style={{
width: 27,
borderRadius: 15,
backgroundColor: '#F84803',
marginVertical: 3,
flex: 1,
}}
/>
)}
onSlidingComplete={v => setValue(Math.round(v))}
/>
{/* 3 */}
<Slider.Vertical
theme={{
maximumTrackTintColor: '#E5E5E5',
minimumTrackTintColor: '#E5E5E5',
}}
type="parcel"
trackStyle={{ width: 35, height: 200, borderRadius: 8 }}
style={{ marginHorizontal: 15 }}
value={value}
maximumValue={100}
minimumValue={0}
reverseValue={true}
thumbTouchSize={{ width: 46, height: 46 }}
thumbStyle={{
width: 14,
height: 3,
borderRadius: 5.5,
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0,
justifyContent: 'center',
alignItems: 'center',
}}
renderMinimumTrack={() => (
<View
style={{
width: 27,
borderRadius: 8,
backgroundColor: '#F84803',
marginVertical: 4,
flex: 1,
}}
/>
)}
renderThumb={() => (
<View
style={{
height: 3,
borderRadius: 5.5,
width: 14,
backgroundColor: '#FFF',
flex: 1,
}}
/>
)}
onSlidingComplete={v => setValue(Math.round(v))}
/>
{/* 4 */}
<Slider.Vertical
theme={{
thumbSize: 20,
thumbRadius: 20,
thumbTintColor: '#F84803',
minimumTrackTintColor: '#F84803',
maximumTrackTintColor: '#E5E5E5',
}}
type="parcel"
maximumValue={100}
minimumValue={0}
reverseValue={true}
trackStyle={{ width: 35, height: 200, borderRadius: 8 }}
thumbTouchSize={{ width: 46, height: 46 }}
style={{ marginHorizontal: 15 }}
value={value}
thumbStyle={{
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0,
justifyContent: 'center',
alignItems: 'center',
}}
useNoun={true}
stepValue={25}
minNounStyle={{ backgroundColor: 'white' }}
maxNounStyle={{ backgroundColor: '#F84803' }}
onSlidingComplete={v => setValue(Math.round(v))}
/>
{/* 5 */}
<Slider.Vertical
theme={{
thumbSize: 26,
thumbRadius: 26,
thumbTintColor: '#FFF',
minimumTrackTintColor: '#F84803',
maximumTrackTintColor: '#E5E5E5',
}}
trackStyle={{ width: 12, height: 200, borderRadius: 8 }}
style={{ marginHorizontal: 15 }}
value={value}
maximumValue={100}
minimumValue={0}
reverseValue={true}
useNoun={true}
stepValue={25}
thumbStyle={{ height: 22, width: 22 }}
minNounStyle={{ backgroundColor: 'white', height: 5, width: 5, borderRadius: 2.5 }}
type="parcel"
maxNounStyle={{
backgroundColor: '#F84803',
height: 5,
width: 5,
borderRadius: 2.5,
}}
onSlidingComplete={v => setValue(Math.round(v))}
/>

API

tuya02:55