React Native Range Slider

A high-quality, cross platform, native iOS range slider for react native. A slider, similar in style to UISlider, but which allows you to pick a minimum and maximum range; inspired by react-native-range-slider

Features

• iOS Support
• Android Support
• Native Code
• Customizable
• Typescript Support

IOS Example

Android Example

Installation

Install the library using either yarn or npm like so:

yarn add @jesster2k10/react-native-range-slider

npm install --save @jesster2k10/react-native-range-slider

IOS Installation

If you're using React Native versions > 60.0, it's relatively straightforward.

cd ios && pod install

For versions below 0.60.0, use rnpm links

• Run react-native link @jesster2k10/react-native-range-slider
• If linking fails, follow the manual linking steps

Android Installation

For versions below 0.60.0, follow the linking instructions above. There are additional steps required to get started with android.

Step One

Modify your settings.gradle to include the following

include ':rangeseekbar'
project(':rangeseekbar').projectDir = new File(rootProject.projectDir, '../node_modules/@jesster2k10/react-native-range-slider/android/crystalrangeseekbar')

Step Two

Modify and your application build.gradle to include:

buildscript {
  dependencies {
    classpath 'com.github.dcendents:android-maven-gradle-plugin:1.5'
    classpath 'com.jfrog.bintray.gradle:gradle-bintray-plugin:1.7.3'
  }
}

Step Three

NOTE: This only applies to react native versions greater than 0.60.0 *NOTE: if you don't have a react-native.config.js file, just create one at the root of your project

Adjust your react-native.config.js to include the following:

module.exports = {
  dependencies: {
    '@jesster2k10/react-native-range-slider': {
      platforms: {
        android: {
          packageImportPath:
            'import com.jesster2k10reactnativerangeslider.ReactNativeRangeSliderPackage;',
        },
      },
    },
  },
}

Step Four

Modify your AndroidManifest.xml and set android:allowBackup="true", see below for example:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  package="com.ReactNativeRangeSliderExample">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="true"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Usage

Basic Usage

You can check out the examples for more usage.

import RangeSlider from '@jesster2k10/react-native-range-slider';

// ...
const App = () => {
  const onChange = (min: number, max: number) => {
    console.log('min: ', min)
    console.log('max: ', max)
  }

  return (
  <RangeSlider
    type="range" // ios only
    min={0}
    max={100}
    selectedMinimum={20} // ios only
    selectedMaximum={60} // ios only
    tintColor="#ecf0f1"
    handleColor="#f368e0"
    handlePressedColor="#f368e0"
    tintColorBetweenHandles="#ff9ff3"
    onChange={onChange}
  />
  )
}

## Props

Common Props

IOS Only Props

Android Only Props

Please note that on android, the tint color refers to the color of the empty track.

Acknowledgments

• This library is an extended version of react-native-range-slider
• The iOS version is based off of TTRangeSlider
• The Android version is a modified version of CrystalRangeSeekbar

Roadmap

• Improve android customization abilities (fonts, handle size)
• Improve documentation
• Unit tests
• Flow support

Contribution

Please visit the CONTRIBUTING.md file.

License

MIT