A component used to select a single value from a range of values.
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.
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.
'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 {
return <SliderExample />;
}
},
{
title: 'Initial value: 0.5',
render(): ReactElement {
return <SliderExample value={0.5} />;
}
},
{
title: 'minimumValue: -1, maximumValue: 2',
render(): ReactElement {
return (
<SliderExample
minimumValue={-1}
maximumValue={2}
/>
);
}
},
{
title: 'step: 0.25',
render(): ReactElement {
return <SliderExample step={0.25} />;
}
},
{
title: 'onSlidingComplete',
render(): ReactElement {
return (
<SlidingCompleteExample />
);
}
},
{
title: 'Custom min/max track tint color',
platform: 'ios',
render(): ReactElement {
return (
<SliderExample
minimumTrackTintColor={'red'}
maximumTrackTintColor={'green'}
/>
);
}
},
{
title: 'Custom thumb image',
platform: 'ios',
render(): ReactElement {
return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
}
},
{
title: 'Custom track image',
platform: 'ios',
render(): ReactElement {
return <SliderExample trackImage={require('./slider.png')} />;
}
},
{
title: 'Custom min/max track image',
platform: 'ios',
render(): ReactElement {
return (
<SliderExample
minimumTrackImage={require('./slider-left.png')}
maximumTrackImage={require('./slider-right.png')}
/>
);
}
},
];
React Native