@5stones/react-native-slider NPM

@5stones/react-native-slider

A truly simple react-native slider.

Motivation

We needed a slider that was:

Based on react-native-gesture-handler.
Simple.

Every other slider is either based on react-native's gesture handler OR are several hundred lines of code and seemingly unnecessarily complex to debug. So we built a slider that was less than 200 lines of code and utilized react-native-gesture-handler.

Installation

npm install @5stones/react-native-slider

Usage

import React from 'react';
import { View } from 'react-native';
import Slider from "@5stones/react-native-slider";

const Screen: React.FC = () => {
  return (
    <View>
      <Slider/>
    </View>
  );
};

Props

Name	Optional	Type	Description
`value`	:white_check_mark:	`number`	A numeric value allowing between the `minimumValue` and `maximumValue` allowing you to control the position of the slider.
`onValueChange`	:white_check_mark:	`(value: number) => void`	A callback function allowing you to receive updates of the slider position.
`thumbSize`	:white_check_mark:	`number`	Specify the size of the thumb (this is important as it's used to calculate positions).
`minimumValue`	:white_check_mark:	`number`	The minimum bound of the sliders value.
`maximumValue`	:white_check_mark:	`number`	The maximum bound of the sliders value.
`defaultContainerWidth`	:white_check_mark:	`number`	A default value for the width of the container (which will get overwritten dynamically after layout).
`touchableContainerStyle`	:white_check_mark:	`ViewStyle`	A style object allowing you control over the touch target container.
`containerStyle`	:white_check_mark:	`ViewStyle`	A style object allowing you control over the container.
`thumbStyle`	:white_check_mark:	`ViewStyle`	A style object allowing you control over the thumb.
`minimumTrackStyle`	:white_check_mark:	`ViewStyle`	A style object allowing you control over the minimum track.
`maximumTrackStyle`	:white_check_mark:	`ViewStyle`	A style object allowing you control over the maximum track.

Release

The standard release command for this project is:

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]

This command will:

Generate/update the Changelog
Bump the package version
Tag & pushing the commit to GitHub & NPM

e.g.

npm version 1.2.17
npm version patch // 1.2.17 -> 1.2.18

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

reactnative react-native react-native-slider react-native-gesture-handler simple slider

@everything-registry/sub-chunk-19 @infinitebrahmanuniverse/nolb-_5 @zalastax/nolb-_5

3 years ago

3 years ago

3 years ago

3 years ago