Skip to content
This repository has been archived by the owner on Oct 9, 2022. It is now read-only.

React Native Slider component with two markers based on NMRangeSlider.

License

Notifications You must be signed in to change notification settings

Enrise/react-native-nmrangeslider-ios

Repository files navigation

Archived and unmaintained

This is an old repository that is no longer used or maintained. We advice to no longer use this repository.

Original README can be found below:

Native iOS multi slider component for React Native

NPM

Native iOS multi slider component for React Native with two markers based on NMRangeSlider.

react-native-multi-slider works in javascript only which creates a noticeable lag when moving a slider. Because NMRangeSlider is implemented as a native module there is no lag in this version.

slider-example

Installation

npm install --save react-native-nmrangeslider-ios

Follow the procedure to link the library in XCode or run rnpm link react-native-nmrangeslider-ios using rnpm.

Open your project in XCode if necessary and go into Libraries > RNNMRangeSlider.xcodeproj > NMRangeSlider and drag and drop the "Slider.xcassets" to the Resources folder. In the dialog, do NOT tick "copy files if necessary" because the files are already part of this project. Note if you used this library before version 1.3.0, remove the "DefaultTheme7" folder you might have copied.

Usage example

import NMRangeSliderIOS from 'react-native-nmrangeslider-ios';

<NMRangeSliderIOS
  minimumValue={0}
  maximumValue={99}
  minimumRange={5}
  lowerValue={10}
  upperValue={80}
  trackColor={#00ff00}
  onChange={onChangeFunction}
  disabled={false}
  style={{ width: 300, height: 50 }}
/>

Changelog

  • 1.3.1 CocoaPod support, #5
  • 1.3.0 Changed image assets into xcassets structure
  • 1.2.0 Add ability to set trackColor
  • 1.1.0 Add ability to disable control
  • 1.0.0 Initial release

License

Copyright 2016 Enrise BV Licensed under the MIT License.