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

| property | type | description | required | | ----------------------- | ---------------------------------- | -------------------------------------------------------------------------------- | -------- | | min | number | the minimum value for the slider | TRUE | | max | number | the maximum value for the slider | TRUE | | onChange | (min: number, max: number) => void | a callback that will be called with slider data once the values change | FALSE | | tintColor | string | tint color for the slider track & handles (ios only, use handleColor on android) | FALSE | | tintColorBetweenHandles | string | tint color for the active part of the slider track | FALSE | | step | number | the step for the slider | FALSE | | handleColor | string | the color for both left and right handlers | FALSE | | style | object | a custom style object for the slider | FALSE | | prefix | string | the prefix for the min and max values | | | suffix | string | the suffix for the min and max values | | | FALSE |

IOS Only Props

| property | type | description | required | | ----------------- | ------- | --------------------------------------------------------- | ------------------ | | type | slider | range | the type of slider | FALSE | | selectedMaximum | number | the selected maximum value, it shouldn't be less than max | FALSE | | selectedMinimum | number | the selected minimum value, it shouldn't be less than min | FALSE | | handleBorderColor | string | the color for the slider handle border | FALSE | | handleWidth | number | the size of the handle | FALSE | | minLabelColor | string | the color of the minimum (left hand) label | FALSE | | maxLabelColor | string | the color of the maximum (right hand) label | FALSE | | handleDiameter | number | the diameter of the handle | FALSE | | lineHeight | number | the height of the slider track | FALSE | | hideLabels | boolean | controls whether the min and max labels are visible | FALSE | | minLabelFont | string | the font family name of the min (left hand) label | FALSE | | minLabelFontSize | number | the font size of the min (left hand) label | FALSE | | maxLabelFont | string | the font family name of the max (right hand) label | FALSE | | maxLabelFontSize | number | the font size of the max (right hand) label | FALSE | | labelPadding | number | extra padding for the min & max labels | FALSE | | maxDistance | number | the maximum distance between handles | FALSE | | minDistance | number | the minimum distance between handles | FALSE | | lineBorderWidth | number | the border width of the slider track | FALSE | | lineBorderColor | string | the border color of the slider track | FALSE |

Android Only Props

| property | type | description | required | | ----------------------- | ------ | ------------------------------------------------ | -------- | | leftHandleColor | string | the color of the left handle | FALSE | | leftHandlePressedColor | string | the color of the left (min) handle when touched | FALSE | | rightHandleColor | string | the color of the right (max) handle | FALSE | | rightHandlePressedColor | string | the color of the right (max) handle when touched | FALSE | | handlePressedColor | string | the color of the handle when touched | FALSE | | minStartValue | number | - | FALSE | | maxStartValue | number | - | FALSE | | fixGap | number | a fixed gap between the handles | FALSE | | corderRadius | number | the corder radius of the slider track | FALSE |

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