react-native-big-slider

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

A react native reusable and efficient dial knob element.

Usage

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.