Slider

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