SliderIOS
disabled bool #
If true the user won't be able to move the slider.
Default value is false.
maximumTrackTintColor string #
The color used for the track to the right of the button. Overrides the
default blue gradient image.
maximumValue number #
Initial maximum value of the slider. Default value is 1.
minimumTrackTintColor string #
The color used for the track to the left of the button. Overrides the
default blue gradient image.
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.
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, e.g. if you don't update
the value, the component won't be reset to its inital value.
'use strict';
var React = require('react-native');
var {
SliderIOS,
Text,
StyleSheet,
View,
} = React;
var SliderExample = React.createClass({
getInitialState() {
return {
value: 0,
};
},
render() {
return (
<View>
<Text style={styles.text} >
{this.state.value}
</Text>
<SliderIOS
{...this.props}
onValueChange={(value) => this.setState({value: value})} />
</View>
);
}
});
var styles = StyleSheet.create({
slider: {
height: 10,
margin: 10,
},
text: {
fontSize: 14,
textAlign: 'center',
fontWeight: '500',
margin: 10,
},
});
exports.title = '<SliderIOS>';
exports.displayName = 'SliderExample';
exports.description = 'Slider input for numeric values';
exports.examples = [
{
title: 'Default settings',
render(): ReactElement {
return <SliderExample />;
}
},
{
title: 'minimumValue: -1, maximumValue: 2',
render(): ReactElement {
return (
<SliderExample
minimumValue={-1}
maximumValue={2}
/>
);
}
},
{
title: 'step: 0.25',
render(): ReactElement {
return <SliderExample step={0.25} />;
}
}
];