Skip to content
This is a simple javascript slider component for react native.
Branch: master
Clone or download
NesChaiyapon Merge pull request #5 from tltk90/enable-static-image-as-thumb
Add conditional for selected thumbImage source
Latest commit 02d9dd3 Feb 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images Create simple slider component Sep 4, 2018
src add conditional thumbImage source Jan 9, 2019
.babelrc Create simple slider component Sep 4, 2018
.buckconfig Create simple slider component Sep 4, 2018
.flowconfig Create simple slider component Sep 4, 2018
.gitattributes Create simple slider component Sep 4, 2018
.gitignore Create simple slider component Sep 4, 2018
.watchmanconfig Create simple slider component Sep 4, 2018
LICENSE Initial commit Sep 4, 2018
README.md Update readme how to use in ScrollView Sep 6, 2018
package-lock.json add conditional thumbImage source Jan 9, 2019
package.json Merge branch 'master' into hotfix/delete-dependencies Sep 4, 2018
test-setup.js Create simple slider component Sep 4, 2018
yarn.lock

README.md

React Native Simple Slider

This is a simple javascript slider component for react native.

This package is compatible both Android and iOS.

Slider component preview image

Installation

$ yarn add react-native-simple-slider

or

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

Usage

state = { value: 0 }

<Slider
  value={this.state.value}
  onValueChange={value => this.setState({ value })}
  disabledHoverEffect={false}
/>

How to use in ScrollView

state = { isScrollEnable: true}

<ScrollView scrollEnabled={this.state.isScrollEnable}>
 <Slider
    onSlidingStart={() => this.setState({ isScrollEnable: false })}
    onSlidingComplete={() => this.setState({ isScrollEnable: true })}
  />
</ScrollView>

Props

Attributes Type Default Description
value number 0 Value of the slider.
minimumValue number 0 Minimum value of the slider.
maximumValue number 1 Maximum value of the slider.
onSlidingStart func () => {} Callback function that is called when the user begin touch the slider.
onValueChange func () => {} Callback fucntion that is called while the user is dragging the slider.
onSlidingComplete func () => {} Callback function that is called when the user releases the slider.
disabled boolean false If true the user won't be able to move the slider.
disabledHoverEffect boolean true If true the slider do not show hover effect.
step number 0 Step value of the slider. The value should be between minimumValue to maximumValue.
minimumTrackTintColor string #3F51B5 The color used for the track on the left side of thumb button.
maximumTrackTintColor string #BDBDBD The color used for the track on the right side of thumb button.
thumbTintColor string #3F51B5 Foreground color of thumb button.
thumbButtonSize number 24 Size of thumb button.
sliderWidth number 325 Width of slider component.
sliderHeight number 6 Height of slider component.
sliderBorderRadius number 3 Border radius of slider component.
thumbImage image(string/number) null Sets an image for the thumb button. Only static images are supported.
thumbButton element null Sets an react component for override the thumb button.

Contributing

Contributions are welcome. Should run npm run test before push.

License

MIT License Copyright (c) 2018 Chaiyapon

You can’t perform that action at this time.