SliderCard
Demo
Studio
import { ClassicSliderCard, ClassicLargeSliderCard } from 'tuya-panel-classic-kit';<ClassicSliderCardstyle={{ marginTop: 20 }}title="Slider Card"icon={TuyaRNSvgs.power}value={value}unit="%"handValueChange={setValue}canTouchTrack/><ClassicLargeSliderCardicon={TuyaRNSvgs.power}showIconBgiconBgColor={{deg: 90,stops: {'0%': 'red','100%': 'yellow',},}}style={{ marginTop: 20 }}title="Thick sliders"unit="%"value={value}handSlidingComplete={setValue}disabled/>
Nordic
import { NordicLargeSliderCard } from 'tuya-panel-nordic-kit';<NordicLargeSliderCardtitle="The wind speed"icon={TuyaRNSvgs.power}maximumValue={enumValue.length - 1}minimumValue={0}value={0}renderValue={value => enumValue[value]}/>;
Acrylic
import { AcrylicSliderCard } from 'tuya-panel-acrylic-kit';<AcrylicSliderCardiconSize={20}title="Function"icon={IMAGE}bothSideIcons={[{ icon: IMAGE, isImage: true },{ icon: IMAGE, isImage: true },]}bothSideIconIsImageiconIsImagevalue={value1}bottomPromptTexts={['Low', 'Max']}handValueChange={setValue1}/><AcrylicSliderCardstyle={{ marginTop: 20 }}iconSize={20}iconIsImagetitle="Function"icon={IMAGE}bothSideIcons={[{ icon: TuyaRNSvgs.power }, { icon: TuyaRNSvgs.power }]}value={value1}bottomPromptTexts={['min', 'max']}handSlidingComplete={setValue1}/><AcrylicSliderCardstyle={{ marginTop: 20 }}iconSize={20}title="Function"icon={TuyaRNSvgs.power}maximumValue={enumValue.length - 1}minimumValue={0}value={0}bottomPromptTexts={['min', 'max']}renderValue={value => enumValue[value]}/>
API
ClassicSliderCard
| Name | Description | Type | Default |
|---|---|---|---|
| sliderProps | Slider props， Doc：https://panel-docs.tuyacn.com/docs/data-entry/slider | SliderProps | -- |
| style | Outer container Style | StyleProp | -- |
| titleStyle | Title container Style | StyleProp | -- |
| titleTextStyle | Title text Style | StyleProp | -- |
| contentStyle | Content container Style | StyleProp | -- |
| thumbStyle | Slider thumb Style | StyleProp | -- |
| theme | SliderProps.theme Doc：https://panel-docs.tuyacn.com/docs/data-entry/slider | Record | -- |
| backgroundColor | Component background color | string | -- |
| radius | Component background radius | number | -- |
| maximumValue | max value | number | 100 |
| minimumValue | min value | number | 0 |
| trackStyle | Sliding groove pattern | StyleProp | -- |
| value | Slider value | number | -- |
| unit | Value unit | string | -- |
| stepValue | Slider Step length | number | 1 |
| hasControl | Whether the slider is controlled | boolean | false |
| canTouchTrack | Whether the value can be changed by touching the track. | boolean | false |
| disabled | Whether to disable or not | boolean | -- |
| handValueChange | Value change callback | (value: number) => void | -- |
| handSlidingComplete | Value change completed callback | (value: number) => void | -- |
| type | Type of the slider: parcel: type of the parcel | "parcel" | "normal" | normal |
| renderMinimumTrack | Custom rendering of the tracks less than the current value. | () => ReactElement | -- |
| renderTitle | Custom rendering Title | (value: number) => ReactElement | -- |
| padding | Outer container Padding [top, right, bottom, left] | number[] | -- |
| width | -- | number | -- |
| title | Title | string | -- |
| showTitle | Show title or not | boolean | true |
| titleFontColor | Title font color | string | -- |
| titleFontSize | Title font size | number | -- |
| titleFontWeight | Title font weight | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | -- |
| valueFontColor | Value font color | string | -- |
| valueFontSize | Value font size | number | -- |
| valueFontWeight | Value font weight | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | -- |
| sliderBgColor | Slider background color | string | -- |
| sliderGrooveBgColor | Sliding groove background color | string | -- |
| sliderThumbColor | Slider thumb color | string | -- |
| sliderThumbSize | Slider thumb size | number | -- |
| sliderThumbRadius | Slider thumb radius | number | -- |
| bottomPromptTexts | Bottom left and right prompt text | [string, string] | -- |
| bottomPromptTextFontSize | Button prompt text font size | number | -- |
| bottomPromptTextFontColor | Button prompt text font color | string | -- |
| bottomPromptTextFontWeight | Button prompt text font weight | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | -- |
| bothSideIcons | ICONS on both sides of the slider | [IconItem, IconItem] | -- |
| bothSideIconSize | Size of ICONS on both sides of the slider | number | -- |
| bothSideIconColor | Color of ICONS on both sides of the slider | string | -- |
| renderValue | Custom value rendering | (value: number) => ReactNode | -- |
| iconIsImage | Whether the card icon is a picture | boolean | false |
| icon | icon svg path | string | -- |
| iconSize | icon size | number | cx(24) |
| iconBgSize | icon background size | number | cx(50) |
| showIconBg | Whether to display icon background | boolean | true |
| iconColor | icon color | string | #fff |
| iconBgColor | icon background color, only rgb、rgba or hex | BackgroundType | #158CFB |
| iconBgRadius | icon background radius | number | cx(50) |