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|() => {}|