react-native-column-slider

A pure JavaScript Slider component, UI similar to iPhone brightness regulator.

Usage

$ npm i react-native-column-slider

import React from 'react';
import { StyleSheet, View } from 'react-native';
import ColumnSlider from 'react-native-column-slider';
 
export default class App extends React.PureComponent {
  render() {
    return (
        <View style={styles.container}>
          <ColumnSlider
              height={300}
              width={100}
              min={0}
              max={50}
              step={1}
              minimumTrackTintColor='#ffc069'
              maximumTrackTintColor='#fff'
              textStyle={{ color: '#ffc069' }}
              suffix="℃"
          />
        </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Props

Property	Type	Default	Description
value	number	0	Initial value of the slider.
disabled	bool	false	If true the user won't be able to move the slider.
min	number	0	Initial minimum value of the slider.
max	number	0	Initial maximum value of the slider.
step	number	0	Step value of the slider. The value should be between 0 and maximumValue - minimumValue).
minimumTrackTintColor	string	'#fff'	The bottom color.
maximumTrackTintColor	string	'#eee'	The top color.
onChange	function	null	Callback continuously called while the user is dragging the slider.
onComplete	function	null	Callback called when the user finishes changing the value (e.g. when the slider is released).
style	style	null	The style applied to the slider container.
textStyle	object	null	The style applied to the value text.
icon	node	null	The bottom icon.
width	number	100	The with of component.
suffix	string	null	The suffix of the value.
borderRadius	number	0	The border radius of component.