react-native/website/versioned_docs/0.28/slider.md

id, title, original_id

id	title	original_id
version-0.28-slider	slider	slider

Slider #

Edit on GitHub

A component used to select a single value from a range of values.

Props #

View props... #

disabled bool #

If true the user won't be able to move the slider. Default value is false.

maximumValue number #

Initial maximum value of the slider. Default value is 1.

minimumValue number #

Initial minimum value of the slider. Default value is 0.

onSlidingComplete function #

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

onValueChange function #

Callback continuously called while the user is dragging the slider.

step number #

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

style View#style #

Used to style and layout the Slider. See StyleSheet.js and ViewStylePropTypes.js for more info.

testID string #

Used to locate this view in UI automation tests.

value number #

Initial value of the slider. The value should be between minimumValue and maximumValue, which default to 0 and 1 respectively. Default value is 0.

This is not a controlled component, you don't need to update the value during dragging.

iosmaximumTrackImage Image.propTypes.source #

Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track.

iosmaximumTrackTintColor string #

The color used for the track to the right of the button. Overrides the default blue gradient image.

iosminimumTrackImage Image.propTypes.source #

Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track.

iosminimumTrackTintColor string #

The color used for the track to the left of the button. Overrides the default blue gradient image.

iosthumbImage Image.propTypes.source #

Sets an image for the thumb. Only static images are supported.

iostrackImage Image.propTypes.source #

Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track.

Examples #

Edit on GitHub

'use strict';

var React = require('react'); var ReactNative = require('react-native'); var { Slider, Text, StyleSheet, View, } = ReactNative;

var SliderExample = React.createClass({ getDefaultProps() { return { value: 0, } },

getInitialState() { return { value: this.props.value, }; },

render() { return ( <View> <Text style={styles.text} > {this.state.value && +this.state.value.toFixed(3)} </Text> <Slider {...this.props} onValueChange={(value) => this.setState({value: value})} /> </View> ); } });

var SlidingCompleteExample = React.createClass({ getInitialState() { return { slideCompletionValue: 0, slideCompletionCount: 0, }; },

render() { return ( <View> <SliderExample {...this.props} onSlidingComplete={(value) => this.setState({ slideCompletionValue: value, slideCompletionCount: this.state.slideCompletionCount + 1})} /> <Text> Completions: {this.state.slideCompletionCount} Value: {this.state.slideCompletionValue} </Text> </View> ); } });

var styles = StyleSheet.create({ slider: { height: 10, margin: 10, }, text: { fontSize: 14, textAlign: 'center', fontWeight: '500', margin: 10, }, });

exports.title = '<Slider>'; exports.displayName = 'SliderExample'; exports.description = 'Slider input for numeric values'; exports.examples = [ { title: 'Default settings', render(): ReactElement<any> { return <SliderExample />; } }, { title: 'Initial value: 0.5', render(): ReactElement<any> { return <SliderExample value={0.5} />; } }, { title: 'minimumValue: -1, maximumValue: 2', render(): ReactElement<any> { return ( <SliderExample minimumValue={-1} maximumValue={2} /> ); } }, { title: 'step: 0.25', render(): ReactElement<any> { return <SliderExample step={0.25} />; } }, { title: 'onSlidingComplete', render(): ReactElement<any> { return ( <SlidingCompleteExample /> ); } }, { title: 'Custom min/max track tint color', platform: 'ios', render(): ReactElement<any> { return ( <SliderExample minimumTrackTintColor={'red'} maximumTrackTintColor={'green'} /> ); } }, { title: 'Custom thumb image', platform: 'ios', render(): ReactElement<any> { return <SliderExample thumbImage={require('./uie_thumb_big.png')} />; } }, { title: 'Custom track image', platform: 'ios', render(): ReactElement<any> { return <SliderExample trackImage={require('./slider.png')} />; } }, { title: 'Custom min/max track image', platform: 'ios', render(): ReactElement<any> { return ( <SliderExample minimumTrackImage={require('./slider-left.png')} maximumTrackImage={require('./slider-right.png')} /> ); } }, ];

Next →