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:

fluid-slider

? Getting started

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

$ react-native link react-native-fluidic-slider

  • Android
    • Please add below script in your build.gradle
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

    • After 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
    • After verification, open your project and create a folder 'RNFluidicSlider' under Libraries.
    • Drag node_modules/react-native-fluidic-slider/ios/pods/Pods.xcodeproject into RNFluidicSlider, as well as the RNFluidicSlider.xcodeproject if it does not exist.
    • Add the fluid_slider.framework & pop.framework into your project's Embedded Binaries and make sure the framework is also in linked libraries.
    • Go to your project's Build Settings -> Frameworks Search Path and add ${BUILT_PRODUCTS_DIR}/fluid_slider non-recursive.
    • Now build your iOS app through Xcode

? Usage

import { RNFluidicSlider } from 'react-native-fluidic-slider'

<RNFluidicSlider></RNFluidicSlider>

? Props

  • General(iOS & Android)
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)

✨ Credits

? How to contribute

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.

? Where is this library used?

If you are using this library in one of your projects, add it in this list below. ✨

GitHub