react-native-featured-slider v1.0.7

react-native-featured-slider

Sliders allow users to select a value from a extended set of options.

This component is a forked implementation of react-native-elements.

Usage

import { Slider } from 'react-native-featured-slider';

<View style={{ flex: 1, alignItems: 'stretch', justifyContent: 'center' }}>
  <Slider
    value={this.state.value}
    onValueChange={(value) => this.setState({ value })}
  />
  <Text>Value: {this.state.value}</Text>
</View>;

Props

• Usage
• Props
• Reference
  • animateTransitions
  • animationConfig
  • animationType
  • debugTouchArea
  • disabled
  • maximumTrackTintColor
  • maximumValue
  • minimumTrackTintColor
  • minimumValue
  • onSlidingComplete
  • onSlidingStart
  • onValueChange
  • orientation
  • step
  • style
  • thumbStyle
  • thumbTintColor
  • thumbTouchSize
  • trackStyle
  • value
  • tickMarks
  • tickMarksColor
  • backgroundImage
  • backgroundColor
  • revert
  • updateOnPress
  • thumbOffset

Reference

animateTransitions

Set to true if you want to use the default 'spring' animation

animationConfig

Used to configure the animation parameters. These are the same parameters in the Animated library.

animationType

Set to 'spring' or 'timing' to use one of those two types of animations with the default animation properties.

debugTouchArea

Set this to true to visually see the thumb touch rect in green.

disabled

If true the user won't be able to move the slider

maximumTrackTintColor

The color used for the track to the right of the button

maximumValue

Initial maximum value of the slider

minimumTrackTintColor

The color used for the track to the left of the button

minimumValue

Initial minimum value of the slider

onSlidingComplete

Callback called when the user finishes changing the value (e.g. when the slider is released)

onSlidingStart

Callback called when the user starts changing the value (e.g. when the slider is pressed)

onValueChange

Callback continuously called while the user is dragging the slider

orientation

Set the orientation of the slider.

step

Step value of the slider. The value should be between 0 and maximumValue - minimumValue)

style

The style applied to the slider container

thumbStyle

The style applied to the thumb

thumbTintColor

The color used for the thumb

thumbTouchSize

The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily.

trackStyle

The style applied to the track

value

Initial value of the slider

tickMarks

Display tick marks

tickMarksColor

The color of the tick marks

backgroundImage

The background image

backgroundColor

The background color of the slider (useful if you are working with a background image)

revert

To revert the slider. Reverts the min/max values

updateOnPress

To update the value if a position on the slider is pressed

thumbOffset

Offset of the thumb