react-native-elements#Slider JavaScript Examples
The following examples show how to use
react-native-elements#Slider.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: PasswordModal.js From RRWallet with MIT License | 5 votes |
|
renderGasComponent() {
if (this.manually) {
return (
<View>
<View style={styles.textContainer}>
<Input
underlineColorAndroid="transparent"
value={this.manuallyGasPrice + ""}
placeholder={i18n.t("qunfabao-custom-gas-price")}
placeholderTextColor="#ccc"
onChangeText={text => (this.manuallyGasPrice = text)}
autoCapitalize="none"
clearButtonMode="while-editing"
keyboardType="decimal-pad"
containerStyle={styles.containerStyle}
inputContainerStyle={styles.inputContainerStyle}
inputStyle={styles.inputStyle}
returnKeyType="done"
rightIcon={<Text style={styles.patchText}>gwei</Text>}
/>
</View>
<View style={styles.textContainer}>
<Input
underlineColorAndroid="transparent"
value={this.manuallyGasLimit + ""}
placeholder={i18n.t("qunfabao-custom-gas")}
placeholderTextColor="#ccc"
onChangeText={text => (this.manuallyGasLimit = text)}
onFocus={() => this.setState({ showFee: true })}
onEndEditing={() => this.setState({ showFee: false })}
autoCapitalize="none"
clearButtonMode="while-editing"
keyboardType="decimal-pad"
containerStyle={styles.containerStyle}
inputContainerStyle={styles.inputContainerStyle}
inputStyle={styles.inputStyle}
returnKeyType="done"
/>
</View>
</View>
);
} else {
return [
<Slider
key="Slider"
minimumTrackTintColor={Theme.linkColor}
thumbTintColor="#FFFFFF"
thumbStyle={{
borderColor: "#B6B6B6",
borderWidth: StyleSheet.hairlineWidth,
width: 24,
height: 24,
borderRadius: 24,
// shadowRadius: 0,
shadowOpacity: 0.5,
shadowColor: "#B6B6B6",
shadowOffset: {
h: 2,
w: 0,
},
}}
step={0.02}
minimumValue={this.minimumSliderValue}
onValueChange={sliderValue => (this.sliderValue = sliderValue)}
trackStyle={{ height: 2, backgroundColor: "#B6B6B6" }}
value={this.sliderValue}></Slider>,
<View key="status" style={styles.row}>
<Text style={styles.speedText}>{i18n.t("qunfabao-custom-slow")}</Text>
<Text style={styles.speedText}>{i18n.t("qunfabao-custom-fast")}</Text>
</View>,
];
}
}
Example #2
| Source File: audioControls.js From cometchat-pro-react-native-ui-kit with MIT License | 5 votes |
|
render() {
const currentTimeString = this.getAudioTimeString(this.state.playSeconds);
const durationString = this.getAudioTimeString(this.state.duration);
return (
<View style={style.audioControlContainer}>
{this.state.playState === PLAY_STATE_PLAYING && (
<TouchableOpacity onPress={this.pause}>
<Icon name="pause" size={20} color="#000000" />
</TouchableOpacity>
)}
{this.state.playState === PLAY_STATE_PAUSED && (
<TouchableOpacity onPress={this.play}>
<Icon name="play-arrow" size={20} color="#000000" />
</TouchableOpacity>
)}
{this.state.playState === PLAY_STATE_LOADING && (
<ActivityIndicator color="#000000" size="small" />
)}
<View style={style.timeStampContainer}>
<Text style={style.timeStampText}>{currentTimeString}</Text>
<Text style={style.timeStampText}>
{'/'}
{durationString}
</Text>
</View>
<Slider
onTouchStart={this.onSliderEditStart}
onTouchEnd={this.onSliderEditEnd}
onSlidingComplete={this.onSliderEditing}
value={this.state.playSeconds}
maximumValue={this.state.duration}
maximumTrackTintColor="#595a5a"
minimumTrackTintColor="black"
step={1}
allowTouchTrack
thumbTouchSize={{ height: 15, width: 15 }}
thumbStyle={style.audioThumbStyle}
style={style.audioSliderStyle}
/>
{this.state.volumeState === VOLUME_STATE_MUTE && (
<TouchableOpacity onPress={this.unmute}>
<Icon name="volume-up" size={20} color="#000000" />
</TouchableOpacity>
)}
{this.state.volumeState === VOLUME_STATE_UNMUTE && (
<TouchableOpacity onPress={this.mute}>
<Icon name="volume-off" size={20} color="#000000" />
</TouchableOpacity>
)}
<TouchableOpacity onPress={this.download}>
<Icon name="file-download" size={20} color="#000000" />
</TouchableOpacity>
</View>
);
}
Example #3
| Source File: audioControls.js From cometchat-pro-react-native-ui-kit with MIT License | 5 votes |
|
render() {
const currentTimeString = this.getAudioTimeString(this.state.playSeconds);
const durationString = this.getAudioTimeString(this.state.duration);
return (
<View style={style.audioControlContainer}>
{this.state.playState === PLAY_STATE_PLAYING && (
<TouchableOpacity onPress={this.pause}>
<Icon name="pause" size={20} color="#000000" />
</TouchableOpacity>
)}
{this.state.playState === PLAY_STATE_PAUSED && (
<TouchableOpacity onPress={this.play}>
<Icon name="play-arrow" size={20} color="#000000" />
</TouchableOpacity>
)}
{this.state.playState === PLAY_STATE_LOADING && (
<ActivityIndicator color="#000000" size="small" />
)}
<View style={style.audioControlTimeContainer}>
<Text style={style.audioControlTimeText}>{currentTimeString}</Text>
<Text style={style.audioControlTimeText}>
{'/'}
{durationString}
</Text>
</View>
<Slider
onTouchStart={this.onSliderEditStart}
onTouchEnd={this.onSliderEditEnd}
onSlidingComplete={this.onSliderEditing}
value={this.state.playSeconds}
maximumValue={this.state.duration}
maximumTrackTintColor="#595a5a"
minimumTrackTintColor="black"
step={1}
allowTouchTrack
thumbTouchSize={style.thumbTouchSize}
thumbStyle={style.thumbStyle}
style={style.sliderStyle}
/>
{this.state.volumeState === VOLUME_STATE_MUTE && (
<TouchableOpacity onPress={this.unmute}>
<Icon name="volume-up" size={20} color="#000000" />
</TouchableOpacity>
)}
{this.state.volumeState === VOLUME_STATE_UNMUTE && (
<TouchableOpacity onPress={this.mute}>
<Icon name="volume-off" size={20} color="#000000" />
</TouchableOpacity>
)}
<TouchableOpacity onPress={this.download}>
<Icon name="file-download" size={20} color="#000000" />
</TouchableOpacity>
</View>
);
}
Example #4
| Source File: PriceRangeScreen.js From spree-react-native with MIT License | 5 votes |
|
function PriceRange({ navigation, dispatch, priceRange }) {
const [priceRangeFrom, setPriceRangeFrom] = React.useState(20)
const [priceRangeTo, setPriceRangeTo] = React.useState(100)
React.useEffect(() => {
setPriceRangeFrom(priceRange.minimum)
setPriceRangeTo(priceRange.maximum)
}, [])
return (
<View style={[globalStyles.container,{ flex: 1, alignItems: 'stretch', justifyContent: 'center' }]}>
<Slider
value={priceRangeFrom}
onValueChange={priceRangeFrom => setPriceRangeFrom(priceRangeFrom)}
minimumValue={20}
maximumValue={40}
step={1}
onSlidingComplete={text => dispatch(setMinimumPriceRange(text))}
trackStyle={{ height: 10, backgroundColor: 'transparent' }}
thumbStyle={{ height: 20, width: 20, backgroundColor: 'transparent' }}
thumbProps={{
children: (
<Icon
name="dollar"
type="font-awesome"
size={20}
reverse
containerStyle={{ bottom: 20, right: 20 }}
color="gold"
/>
),
}}
/>
<Text style={{alignSelf: 'center', marginBottom: 10}}>From: {priceRangeFrom}</Text>
<Slider
value={priceRangeTo}
onValueChange={priceRangeTo => setPriceRangeTo(priceRangeTo)}
minimumValue={40}
maximumValue={100}
step={1}
onSlidingComplete={text => dispatch(setMaximumPriceRange(text))}
trackStyle={{ height: 10, backgroundColor: 'transparent' }}
thumbStyle={{ height: 20, width: 20, backgroundColor: 'transparent' }}
thumbProps={{
children: (
<Icon
name="dollar"
type="font-awesome"
size={20}
reverse
containerStyle={{ bottom: 20, right: 20 }}
color="gold"
/>
),
}}
/>
<Text style={{alignSelf: 'center'}}>To: {priceRangeTo}</Text>
</View>
);
}
Example #5
| Source File: slider.playground.jsx From playground with MIT License | 4 votes |
|
SliderPlayground = () => {
const params = useView({
componentName: "Slider",
props: {
animateTransitions: {
value: true,
type: PropTypes.Boolean,
},
animationConfig: {
valie: `{}`,
type: PropTypes.Object,
},
animationType: {
value: "timing",
options: {
timing: "timing",
spring: "spring",
},
type: PropTypes.Enum,
description: "Defines the Animation type.",
},
debugTouchArea: {
type: PropTypes.Boolean,
value: false,
description:
"Set this to true to visually see the thumb touch rect in green.",
},
disabled: {
type: PropTypes.Boolean,
value: false,
description: "Disables the slider",
},
maximumTrackTintColor: {
type: PropTypes.String,
value: "#ccc",
},
maximumValue: {
value: 100,
type: PropTypes.Number,
},
minimumTrackTintColor: {
type: PropTypes.String,
value: "#222",
},
minimumValue: {
value: 0,
type: PropTypes.Number,
},
allowTouchTrack: {
type: PropTypes.Boolean,
value: false,
description:
"If true, thumb will respond and jump to any touch along the track.",
},
onSlidingComplete: {
type: PropTypes.Function,
value: `() => console.log("onSlidingComplete()")`,
},
onSlidingStart: {
type: PropTypes.Function,
value: `() => console.log("onSlidingStart()")`,
},
onValueChange: {
type: PropTypes.Function,
value: `(value) => console.log("onValueChange()",value)`,
},
orientation: {
value: "horizontal",
options: {
horizontal: "horizontal",
vertical: "vertical",
},
type: PropTypes.Enum,
description: "Slider's Orientation",
},
step: {
value: 1,
type: PropTypes.Number,
},
style: {
value: `{width:"80%",height:200}`,
type: PropTypes.Object,
},
thumbStyle: {
value: `{ height: 20, width: 20 }`,
type: PropTypes.Object,
},
thumbProps: {
value: `{
children: (
<Icon
name="heartbeat"
type="font-awesome"
size={20}
reverse
containerStyle={{ bottom: 20, right: 20 }}
color="#f50"
/>
),
}`,
type: PropTypes.Object,
},
thumbTintColor: {
type: PropTypes.String,
value: `#0c0`,
},
thumbTouchSize: {
type: PropTypes.Object,
value: `{width: 40, height: 40}`,
},
trackStyle: {
value: `{ height: 10,borderRadius:20 }`,
type: PropTypes.Object,
},
value: {
value: 50,
type: PropTypes.Number,
},
},
scope: {
Slider,
Icon,
},
imports: {
"react-native-elements": {
named: ["Slider", "Icon"],
},
},
});
return (
<React.Fragment>
<Playground params={params} />
</React.Fragment>
);
}
