npm package: @mtourj/react-native-custom-slider
Description: React Native Slider with Customizable Thumb
Author: LkyYuen
Latest version: 1.0.4

# react-native-custom-slider

## Getting started

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

### Mostly automatic installation

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

## Usage
```javascript
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](http://facebook.github.io/react-native/docs/view.html#style)     | Yes      |                           | The style applied to the slider container
trackStyle            | [style](http://facebook.github.io/react-native/docs/view.html#style)     | Yes      |                           | The style applied to the track
thumbStyle            | [style](http://facebook.github.io/react-native/docs/view.html#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](https://facebook.github.io/react-native/docs/animations.html).
animationConfig       | object    | Yes      | undefined                 | Used to configure the animation parameters.  These are the same parameters in the [Animated library](https://facebook.github.io/react-native/docs/animations.html). 


---

**MIT Licensed**