react-native-range-slider

0.1.2 • Public • Published

React Native Range Slider

The high-quality 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.

Note: This slider can also be used as a normal slider with only one handle.


Demo

Getting Started

  1. Installation

    • Using npm: npm install --save react-native-range-slider
    • Using yarn: yarn add react-native-range-slider
  2. Link

Usage

If you want a working example you can check this example, otherwise you can use the following example as a starting point.

import RangeSlider from 'react-native-range-slider'
<View style={{flex: 1, flexDirection: 'row'}}>
  <RangeSlider
    minValue={0}
    maxValue={100}
    tintColor={'#da0f22'}
    handleBorderWidth={1}
    handleBorderColor="#454d55"
    selectedMinimum={20}
    selectedMaximum={40}
    style={{ flex: 1, height: 70, padding: 10, backgroundColor: '#ddd' }}
    onChange={ (data)=>{ console.log(data);} }
  />
</View>

API

Property Description Type
disableRange when set to true, the slider will mimic a normal slider with only one handle and the slider value will be stored in selectedMaximum Boolean, false by default
minValue the minimum value for the slider Number(float)
maxValue the maximum value for the slider Number(float)
selectedMinimum the selected minimum value, it shouldn't be less than minValue Number(float)
selectedMaximum the selected maximum value, it shouldn't be bigger than maxValue Number(float)
onChange a callback that will be called with slider data once the values change Callback
tintColor the color for the slider bar and the two handlers String(MUST BE A HEX VALUE)
handleColor the color for both selectedMinimum and selectedMaximum handlers String(MUST BE A HEX VALUE)
handleBorderColor the color for the slider handle border String(MUST BE A HEX VALUE)
handleBorderWidth the width for the slider handle border Number(float)
handleDiameter the diameter for the slider handle Number(float) default 16.0
tintColorBetweenHandles the color of the slider bar between the selectedMinimum and selectedMaximum handlers String(MUST BE A HEX VALUE)
minLabelColour the color of the min label on top of selectedMinimum handler String(MUST BE A HEX VALUE)
maxLabelColour the color of the max label on top of selectedMaximum handler String(MUST BE A HEX VALUE)
lineHeight the height for slider bar Number(float) default 1.0)
preffix the string to be prepended to min and max labels values String
suffix the string to be appended to min and max labels values String
hideLabels a boolean to determine handle labels visibility, if set to true range labels will be hidden Boolean

Todo

  • Add possibility to update handlers related properties.
  • Impliment other necessary methods.
  • Improve the documentation.
  • Make the module cooler.
  • Add android support.

Acknowledgement

How to contribute ?

You are interested and want to contribute? Awesome, just consider the following steps:

  1. Fork this repository.
  2. Add and test the fixes/improvements you worked on to a seperate branch.
  3. Submit your pull request(PR).

Package Sidebar

Install

npm i react-native-range-slider

Weekly Downloads

644

Version

0.1.2

License

MIT

Unpacked Size

8.42 MB

Total Files

17

Last publish

Collaborators

  • ismnoiet