ReactNative: Native Fluidic Slider .This library is a React Native bridge around native fluid slider libraries. It allows you select value from a range of values:
$ npm install react-native-fluidic-slider --save
$ react-native link react-native-fluidic-slider
buildscript {
repositories {
google()
maven { url "https://maven.google.com" }
jcenter()
...
}
}
allprojects {
repositories {
google()
mavenLocal()
maven { url 'https://jitpack.io' }
maven {
url 'https://maven.google.com/'
name 'Google'
}
jcenter()
...
}
}
Note: Android SDK 27 > is supported
iOS
iOS Prerequisite: Please make sure CocoaPods is installed on your system
react-native link react-native-fluidic-slider
, please verify node_modules/react-native-fluidic-slider/ios/
contains Pods
folder. If does not exist please execute pod install
command on node_modules/react-native-fluidic-slider/ios/
, if any error => try pod repo update
then pod install
node_modules/react-native-fluidic-slider/ios/pods/Pods.xcodeproject
into RNFluidicSlider, as well as the RNFluidicSlider.xcodeproject if it does not exist.fluid_slider.framework
& pop.framework
into your project’s Embedded Binaries
and make sure the framework is also in linked libraries.Build Settings -> Frameworks Search Path
and add ${BUILT_PRODUCTS_DIR}/fluid_slider
non-recursive.import { RNFluidicSlider } from 'react-native-fluidic-slider'
<RNFluidicSlider></RNFluidicSlider>
Prop | Type | Default | Note |
---|---|---|---|
min |
number |
0 |
Specify min range value of the slider |
max |
number |
100 |
Specify max range value of the slider |
initialPosition |
number - 0 to 1 |
.5 |
Specify initial position of slider indicator |
barColor |
string: HEX_COLOR |
#6168e7 |
Specify bar color |
bubbleColor |
string: HEX_COLOR |
#FFFFFF |
Specify bubble color |
barTextColor |
string: HEX_COLOR |
#FFFFFF |
Specify bar text color |
bubbleTextColor |
string: HEX_COLOR |
#000000 |
Specify bubble text color |
beginTracking |
func (position) |
Specify callback function for begin tracking | |
endTracking |
func (position) |
Specify callback function for end tracking |
Note:
- Initial Position: Sepcify initial position in fraction from 0 to 1
- beginTracking & endTracking: It will provide fraction value of position ranging from 0 to 1. Please use below formulate to calculate numerical value of selected position:
min + ((min - max) * position)
Have an idea? Found a bug? Please raise to ISSUES.
Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.
If you are using this library in one of your projects, add it in this list below. ✨
Author: prscX
GitHub: https://github.com/prscX/react-native-fluidic-slider
#react-native #programming #reactjs