Extension SDK for PanelsLight SDKLighting Component LibraryColor Temperature Picker

Color Temperature Picker

Last Updated on : 2021-12-16 03:31:23download

TemperaturePicker

Preview

Properties

Field name	Type	Description	Default value
accessibilityLabel	String	The label that describes the tested accessibility element.	‘TemperaturePicker’
bgImg	Any	The image of the track. If you set this property, the `gradientBg` property does not work.	None
style	Style	The style of the component.	None
thumbStyle	Style	The style of the thumb.	None
renderThumb	Func	The rendering of the thumb.	None
disabled	Bool	Specifies whether to disable the component.	false
hideThumb	Bool	Specifies whether to hide the thumb.	false
disalbedThumbOpacity	Number	The opacity of the thumb when the component is disabled.	0.4
radius	Number	The radius of the outer track.	135
innerRadius	Number	The radius of the inner track.	66
thumbRadius	Number	The radius of the thumb.	16
offsetAngle	Number	The offset angle in the counterclockwise direction.	180
gradientBg	Array	The gradient options of the color temperature picker.	[{ offset: ‘0%’, stopColor: ‘#FFCA5C’, stopOpacity: 1 }, { offset: ‘50%’, stopColor: ‘#fff’, stopOpacity: 1 }, { offset: ‘100%’, stopColor: ‘#CDECFE’, stopOpacity: 1 } ]
touchThumbRadius	Number	The radius of the touchable area for the thumb.	0
touchOffset	Number	The offset of the touchable area. You can set the value to increase the touchable area.	0
value	Number	The current value.	0
min	Number	The minimum of the color temperature.	0
max	Number	The maximum of the color temperature.	1000
step	Number	The step of the color temperature.	1
sideOffset	Number	The offset of the edge. You can set the value to define the accessibility of edge values.	10
storageKey	String	The key that is used to locally store the location of the thumb.	‘temperature_picker’
onChange	Func	The value change event that is triggered only when a value is changed.	None
onGrant	Func	The event in which the thumb starts to move.	None
onMove	Func	The event in which the thumb is moving.	None
onRelease	Func	The event in which the thumb stops moving.	None
onPress	Func	The event in which the track is touched.	None

Example

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

Prev DocRectangular Color and Brightness Picker

Next DocColor Hue Picker