Slider

Last Updated on : 2024-06-05 03:14:34download

Overview

Slider is usually used for the selection of numerical data points inside a panel.

Code demo

Note: for more information, see Demo.

Horizontal slider

import React, { Component } from "react"; import { View } from "react-native"; import { Slider } from "tuya-panel-kit"; export default class SliderHorizontalScene extends Component { state = { value: 0, }; _handleComplete = (value) => { this.setState({ value: Math.round(value) }); }; render() { return ( <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}> <Slider.Horizontal style={{ width: 295 }} maximumValue={100} minimumValue={0} value={this.state.value} maximumTrackTintColor="rgba(0, 0, 0, 0.1)" minimumTrackTintColor="#4397D7" onSlidingComplete={this._handleComplete} /> </View> ); } }

Vertical slider

import React, { Component } from "react"; import { View } from "react-native"; import { Slider } from "tuya-panel-kit"; export default class SliderVerticalScene extends Component { state = { value: 24, }; _handleComplete = (value) => { this.setState({ value: Math.round(value) }); }; render() { return ( <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}> <Slider.Vertical style={{ height: 200 }} value={this.state.value} minimumValue={0} maximumValue={100} minimumTrackTintColor="#4A90E2" maximumTrackTintColor="#50E3C2" /> </View> ); } }

API

style

Container style.

Type Required
ViewPropTypes.style No

horizontal

Whether it is horizontal.

Type Required Default value
boolean No true

disabled

Whether to disable or not.

Type Required Default value
boolean No false

value

The current value.

Type Required Default value
number No 0

minimumValue

The minimum value.

Type Required Default value
number No 0

maximumValue

The maximum value.

Type Required Default value
number No 1

stepValue

Step length. Must be exactly divisible by minimumValue and maximumValue.

Type Required Default value
number No 0

onSlidingStart

Callback of starting the slide.

Type Required Default value
(value) => void No null

onValueChange

Callback of changing the sliding value.

Type Required Default value
(value) => void No null

onSlidingComplete

Callback of ending the slide.

Type Required Default value
(value) => void No null

outerWidth

Track width.

Type Required Default value
number No null

onlyMaximumTrack

Whether to display only track colors that are greater than the current value.

Type Required Default value
boolean No false

canTouchTrack

Whether the value can be changed by touching the track.

Type Required Default value
boolean No false

minimumTrackTintColor

Track color that is less than the current value.

Type Required Default value
Color No #3f3f3f

maximumTrackTintColor

Track color that is greater than the current value.

Type Required Default value
Color No #b3b3b3

trackStyle

General track style.

Type Required
ViewPropTypes.style No

renderMinimumTrack

Custom rendering of the tracks less than the current value.

Type Required Default value
() => React.element No null

renderMaximumTrack

Custom rendering of the tracks greater than the current value.

Type Required Default value
() => React.element No null

thumbTintColor

The color used to tint the default thumb images on iOS, or the color of the foreground switch grip on Android.

Type Required Default value
Color No #343434

thumbStyle

Style of the thumb.

Type Required
ViewPropTypes.style No

renderThumb

Custom rendering of the thumb.

Type Required Default value
() => React.element No null
Name Description
Vertical Vertical slider
horizontal Horizontal slider