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
MIT License
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
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
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
react-native link @jesster2k10/react-native-range-slider
For versions below 0.60.0, follow the linking instructions above. There are additional steps required to get started with android.
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')
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'
}
}
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;',
},
},
},
},
}
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>
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
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 |
property | type | description | required |
---|---|---|---|
type | slider | range | the type of slider |
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 |
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 visit the CONTRIBUTING.md file.
MIT