Skip to content
A pure JavaScript Slider component, UI similar to iPhone brightness regulator.
JavaScript Objective-C Python Java
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
example
src
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
index.js
package-lock.json
package.json

README.md

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.
You can’t perform that action at this time.