English | 中文

Sliders allow users to select a value from a fixed set of options. It supports the following features:

• horizontal and vertical two directions
• one or two thumbs two modes
• customized style for track and thumb
• friendly tooltip and fully customized tip formatter

npm install @rn-components-kit/slider --save

Preview	Code
	Demo1 Code
	Demo2 Code
	Demo3 Code
	Demo4 Code

• style
• min
• max
• step
• defaultValue
• multi
• vertical
• showTip
• tipContainerStyle
• tipTextStyle
• trackColor
• selectedTrackColor
• thumbStyle
• renderThumb
• tipFormatter
• onValueChange
• onBeginSliding
• onEndSliding

Allows you to customize style

The minimum value that thumb can slide to

The maximum value that thumb can slide to

The granularity the slider can step through values. (Must greater than 0, and be divided by (max - min))

The initial value when first render slider

Determines whether one or two thumbs in slider

Determines whether slider is horizontal or vertical

Determines whether tooltip is shown

Allows you to customize tooltip's container style (e.g. size, backgroundColor)

Allows you to customize tooltip's text style (e.g. fontSize, color)

Color of track

Color of track's selected part

Allows you to customize thumb's style (e.g. color, size, shadow)

() => void

Allows you to fully customize thumb module

(value: number) => string

Slider will pass value to tipFormatter, and display its return value in tooltip

(value: number) => void

A callback will be triggered when slider's value changes

() => void

A callback will be triggered when slider starts to slide

() => void

A callback will be triggered when slider ends to slide