react-native-epic-slider
Version:
  [](https://choosealicense.com/licenses/mit/)
89 lines (87 loc) • 1.78 kB
Flow
import {StyleSheet} from 'react-native';
import {DEFAULT_THUMB_SIZE, DEFAULT_TRACK_HEIGHT} from './utils';
const styles = StyleSheet.create({
container: {},
trackContainer: {
height: DEFAULT_THUMB_SIZE,
justifyContent: 'center',
},
track: {
position: 'absolute',
left: 0,
right: 0,
borderRadius: DEFAULT_TRACK_HEIGHT / 2,
},
progress: {
position: 'absolute',
left: 0,
borderRadius: DEFAULT_TRACK_HEIGHT / 2,
},
thumb: {
position: 'absolute',
borderRadius: DEFAULT_THUMB_SIZE / 2,
shadowColor: '#22223B',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
zIndex: 2,
},
valueText: {
textAlign: 'center',
marginBottom: 10,
fontSize: 16,
color: '#d9d9d9',
},
point: {
position: 'absolute',
borderRadius: 50,
zIndex: 1,
},
floatingLabel: {
position: 'absolute',
zIndex: 2,
alignItems: 'center',
},
labelContainer: {
backgroundColor: '#22223B',
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 4,
},
labelText: {
color: '#FFFFFF',
fontSize: 12,
fontWeight: '600',
},
verticalContainer: {
alignItems: 'center',
justifyContent: 'center',
height: '100%',
},
verticalTrackContainer: {
width: DEFAULT_THUMB_SIZE,
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
verticalTrack: {
height: '100%',
width: DEFAULT_TRACK_HEIGHT,
position: 'absolute',
},
verticalProgress: {
width: DEFAULT_TRACK_HEIGHT,
position: 'absolute',
bottom: 0,
},
verticalValueText: {
marginBottom: 0,
marginRight: 10,
writingDirection: 'ltr',
},
});
export default styles;