netbeast / react-native-big-slider

:level_slider: Yet another, big one, pure JS easily customisable and hackable react-native slider component

Home Page:https://getyeti.co

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react-native-big-slider

npm version

works with yeti

 This package powers Yeti Smart Home and is used in production.

A react native reusable and efficient dial knob element.

Usage

demo screenshot

To achieve the previously shown elements, you can take a look at the example or use the following snippets:

import BigSlider from 'react-native-big-slider'

// ...

<BigSlider minimumValue={-50}
  label={`${this.state.valA | 0}º`}
  value={this.state.valA} onValueChange={valA => {
    this.setState({ valA })
  }} />

// ...

<BigSlider
  horizontal
  maximumValue={120}
  style={{ width: 140 }}
  value={this.state.valB}
  minimumValue={-120} />

// ...

<BigSlider
  horizontal
  maximumValue={120}
  style={{ backgroundColor: 'rgba(0,0,0,.7)' }}
  trackStyle={{ backgroundColor: 'rgba(194, 61, 85, 1)' }}
  label="friction"
  minimumValue={-120} />

// ...

<BigSlider
  style={{ width: 80 }}
  renderLabel={() => <Text style={{textAlign:'center', padding: 20}}>
    Brightness
  </Text>}
  trackStyle={{ backgroundColor: 'rgba(143, 255, 160, .7)' }}
  maximumValue={30}
  minimumValue={-120}
  value={this.state.valB} />

// ...

<BigSlider
  style={{ width: 110 }}
  trackStyle={{ backgroundColor: 'rgb(255, 166, 102)' }}
  maximumValue={30}
  minimumValue={-120}
  value={this.state.valB} />

More documentation is incoming, in the meanwhile please read the source code. It is a single file! PRs and issues are more than welcome.

Follow us in Github or https://twitter.com/netbeast_co.

About

:level_slider: Yet another, big one, pure JS easily customisable and hackable react-native slider component

https://getyeti.co


Languages

Language:JavaScript 56.5%Language:Objective-C 25.4%Language:Python 9.9%Language:Java 8.1%