https://github.com/hezhii/react-native-column-slider

A pure JavaScript Slider component, UI similar to iPhone brightness regulator.
https://github.com/hezhii/react-native-column-slider

column iphone javascript react-native slider vertical

Last synced: about 5 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/hezhii/react-native-column-slider
• Owner: hezhii
• License: mit
• Created: 2018-12-18T15:11:32.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T16:15:10.000Z (almost 2 years ago)
• Last Synced: 2024-11-10T23:08:27.788Z (9 days ago)
• Topics: column, iphone, javascript, react-native, slider, vertical
• Language: JavaScript
• Size: 930 KB
• Stars: 13
• Watchers: 2
• Forks: 5
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-column-slider

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



## Usage

```bash

$ npm i react-native-column-slider

```

```js

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 (

        

          

        

    );

  }

}

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](https://facebook.github.io/react-native/docs/view.html#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.|