@rn-components-kit/slider

Slider

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

How to use

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

Preview	Code
	Demo1 Code
	Demo2 Code
	Demo3 Code
	Demo4 Code

Props

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

Reference

Props

style

Allows you to customize style

Type	Required	Default
object	no	-

min

The minimum value that thumb can slide to

Type	Required	Default
number	no	0

max

The maximum value that thumb can slide to

Type	Required	Default
number	no	100

step

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

Type	Required	Default
number	no	1

defaultValue

The initial value when first render slider

Type	Required	Default
number | number[]	no	-

multi

Determines whether one or two thumbs in slider

Type	Required	Default
boolean	no	false

vertical

Determines whether slider is horizontal or vertical

Type	Required	Default
boolean	no	false

showTip

Determines whether tooltip is shown

Type	Required	Default
enum('never', 'onTap', 'always')	no	false

tipContainerStyle

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

Type	Required	Default
object	no	-

tipTextStyle

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

Type	Required	Default
object	no	-

trackColor

Color of track

Type	Required	Default
string	no	'#DDD'

selectedTrackColor

Color of track's selected part

Type	Required	Default
string	no	'#40A9FF'

thumbStyle

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

Type	Required	Default
object	no	-

renderThumb

() => void

Allows you to fully customize thumb module

Type	Required	Default
function	no	-

tipFormatter

(value: number) => string

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

Type	Required	Default
function	no	value => value.toString()

onValueChange

(value: number) => void

A callback will be triggered when slider's value changes

Type	Required	Default
function	no	() => {}

onBeginSliding

() => void

A callback will be triggered when slider starts to slide

Type	Required	Default
function	no	() => {}

onEndSliding

() => void

A callback will be triggered when slider ends to slide

Type	Required	Default
function	no	() => {}