1.0.3 • Published 5 years ago
reactnative-range-selector v1.0.3
ReactNative RangeSelector
simple range selector for reactnative
Install
npm i -S reactnative-range-selector
Usage
import React, { Component } from 'react'
import { View } from 'react-native'
import RangeSelector from 'reactnative-range-selector'
class App extends Component {
slideToChange = ({ min, max }) => {
console.log(min, max)
}
render() {
return (
<View style={{widht: '100%'}}>
<RangeSelector
min={0}
max={100}
defaultMin={10}
defaultMax={30}
onMoveChange={this.slideToChangePrice}
/>
</View>
)
}
}
Property
RangeSelector provide default background bar, front bar and slider also. you can just props some a few of properites to use it.
Basic use
- min: a number for selectable minimum
- max: a number for selectable maximun
- defaultMin: a number for default min value
- defaultMax: a number for default max value
- onMoveChange: a function with one object arguments contains
min
andmax
value on slider moving
Custom component
if default component is not you want, these component are all customlizable! some properties will be greatful.
- getSlider: a function return a component
- sliderMoveStart: a function with one object arguments contains
min
andmax
value on slider start move - sliderMoveEnd: a function with one object arguments contains
min
andmax
value on slider end move - backgroundBarStyle: a object with styles
- frontBarStyle: a object with styles
For all example:
// ignore import
class App extends Component {
slideToChange = ({ min, max }) => {
console.log(min, max)
}
// function getSlider provide customlize slider
getSlider = () => {
return (<View />)
}
// function onSliderStart will emit on slide start
onSliderStart = ({ min, max }) => {}
// function onSliderEnd will emit on slide end
onSliderEnd = ({ min, max }) => {}
render() {
// backgroundBarStyle provide background bar style.
const backgroundBarStyle = {
backgroundColor: '#F0F2F5',
height: 6,
}
// frontBarStyle provide front bar style.
const frontBarStyle = {
backgroundColor: '#55aaff',
height: 6,
}
return (
<View style={{widht: '100%'}}>
<RangeSelector
min={0}
max={100}
defaultMin={10}
defaultMax={30}
onMoveChange={this.slideToChangePrice}
getSlider={this.getSlider}
sliderMoveStart={this.onSliderStart}
sliderMoveEnd={this.onSliderEnd}
backgroundBarStyle={backgroundBarStyle}
frontBarStyle={frontBarStyle}
/>
</View>
)
}
}
FAQ
Any question please contact me. welcome star, welcome fork.