# react-native-custom-slider-fixed

> fix lifecycle

Latest version **1.0.0** (published 2021-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-custom-slider-fixed
pnpm add react-native-custom-slider-fixed
yarn add react-native-custom-slider-fixed
bun add react-native-custom-slider-fixed
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-11-16 |
| First published | 2021-11-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Choyeongdeok |
| Maintainers | choyeongdeok |
| Keywords | react-native, slider |

## Links

- npm: https://www.npmjs.com/package/react-native-custom-slider-fixed
- Repository: https://github.com/LkyYuen/react-native-custom-slider-fixed
- Homepage: https://github.com/LkyYuen/react-native-custom-slider-fixed#readme
- Issues: https://github.com/LkyYuen/react-native-custom-slider-fixed/issues
- npm.io page: https://npm.io/package/react-native-custom-slider-fixed

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-11-16

## README

# react-native-custom-slider-fixed(fix lifecycle)

## Getting started

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

### Mostly automatic installation

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

## Usage
```javascript
import React, { useState } from "react"
import { View } from "react-native"
import Slider from 'react-native-custom-slider-fixed';

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**

---
_Source: https://npm.io/package/react-native-custom-slider-fixed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._