react-native-custom-slider

Getting started

$ npm install react-native-custom-slider --save

Mostly automatic installation

$ react-native link react-native-custom-slider

Usage

import React, { useState } from "react"
import { View } from "react-native"
import Slider from 'react-native-custom-slider';

const SliderApp = props => {

    const [value, setValue] = useState(15);

    return (
        <Slider
            value={value}
            minimumValue={0}
            maximumValue={50}
            onValueChange={(value) => setValue(value)}
            thumbStyle={{ justifyContent: 'center', alignItems: 'center', width: 25 }}
            customThumb={
                <View
                    style={{
                        width: 35,
                        height: 20,
                        overflow: 'hidden',
                        borderTopLeftRadius: 10,
                        borderTopRightRadius: 10,
                        borderBottomLeftRadius: 10,
                        borderBottomRightRadius: 10,
                        backgroundColor: 'gold' 
                    }}
                />
            }
        />
    )
}

Props

Prop | Type | Optional | Default | Description --------------------- | --------- | -------- | ------------------------- | ----------- value | number | Yes | 0 | Initial value of the slider disabled | bool | Yes | false | If true the user won't be able to move the slider minimumValue | number | Yes | 0 | Initial minimum value of the slider customMinimumTrack | number | Yes | 1 | Initial maximum value of the slider step | number | Yes | 0 | Step value of the slider. The value should be between 0 and maximumValue - minimumValue) minimumTrackTintColor | string | Yes | '#3f3f3f' | The color used for the track to the left of the button customMinimumTrack | component | Yes | | Sets an custom component used for the track to the left of the button. maximumTrackTintColor | string | Yes | '#b3b3b3' | The color used for the track to the right of the button customMaximumTrack | component | Yes | | Sets an custom component used for the track to the right of the button. thumbTintColor | string | Yes | '#343434' | The color used for the thumb thumbTouchSize | object | Yes | {width: 40, height: 40} | The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily. onValueChange | function | Yes | | Callback continuously called while the user is dragging the slider onSlidingStart | function | Yes | | Callback called when the user starts changing the value (e.g. when the slider is pressed) onSlidingComplete | function | Yes | | Callback called when the user finishes changing the value (e.g. when the slider is released) style | style | Yes | | The style applied to the slider container trackStyle | style | Yes | | The style applied to the track thumbStyle | style | Yes | | The style applied to the thumb customThumb | component | Yes | | Sets an custom component for the thumb. debugTouchArea | bool | Yes | false | Set this to true to visually see the thumb touch rect in green. animateTransitions | bool | Yes | false | Set to true if you want to use the default 'spring' animation animationType | string | Yes | 'timing' | Set to 'spring' or 'timing' to use one of those two types of animations with the default animation properties. animationConfig | object | Yes | undefined | Used to configure the animation parameters. These are the same parameters in the Animated library.

MIT Licensed