@rn-components-kit/slider v1.0.5

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

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

min

The minimum value that thumb can slide to

max

The maximum value that thumb can slide to

step

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

defaultValue

The initial value when first render slider

multi

Determines whether one or two thumbs in slider

vertical

Determines whether slider is horizontal or vertical

showTip

Determines whether tooltip is shown

tipContainerStyle

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

tipTextStyle

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

trackColor

Color of track

selectedTrackColor

Color of track's selected part

thumbStyle

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

renderThumb

() => void

Allows you to fully customize thumb module

tipFormatter

(value: number) => string

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

onValueChange

(value: number) => void

A callback will be triggered when slider's value changes

onBeginSliding

() => void

A callback will be triggered when slider starts to slide

onEndSliding

() => void

A callback will be triggered when slider ends to slide