🎚 Yet another, big one, pure JS easily customisable and hackable react-native slider component
Switch branches/tags
Nothing to show
Clone or download
Latest commit 4171d17 Oct 30, 2017
Permalink
Failed to load latest commit information.
example Adds sticky primitive Oct 30, 2017
.gitattributes First commit Sep 28, 2017
.gitignore First commit Sep 28, 2017
.npmignore Excludes example for npm Sep 29, 2017
BigSlider.js Basic flow types Oct 30, 2017
README.md Adds README.md Sep 29, 2017
package.json 0.1.1 Oct 30, 2017
screenshot.png Adds README.md Sep 29, 2017
works-with-yeti.png Adds README.md Sep 29, 2017

README.md

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.