react-native-multi-slider/styles.js at master · smekalka/react-native-multi-slider · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import {StyleSheet, Platform} from 'react-native';

export const sliderStyles = StyleSheet.create({
    container: {
        position: 'relative',
        height: 50,
        justifyContent: 'center'
    },
    markerContainer: {
        position: 'absolute',
        width: 48,
        height: 48,
        backgroundColor: 'transparent',
        justifyContent: 'center',
        alignItems: 'center'
    },
    topMarkerContainer: {
        zIndex: 1
    },
    touch: {
        backgroundColor: 'transparent',
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'stretch'
    }
});


export const markerStyles = StyleSheet.create({
  markerStyle: {
    ...Platform.select({
      ios: {
        height: 30,
        width: 30,
        borderRadius: 30,
        borderWidth: 1,
        borderColor: '#DDDDDD',
        backgroundColor: '#FFFFFF',
        shadowColor: '#000000',
        shadowOffset: {
          width: 0,
          height: 3,
        },
        shadowRadius: 1,
        shadowOpacity: 0.2,
      },
      android: {
        height: 12,
        width: 12,
        borderRadius: 12,
        backgroundColor: '#0D8675',
      },
    }),
  },
  pressedMarkerStyle: {
    ...Platform.select({
      ios: {},
      android: {
        height: 20,
        width: 20,
        borderRadius: 20,
      },
    }),
  },
  disabled: {
    backgroundColor: '#d3d3d3',
  },
});

export const trackStyles = StyleSheet.create({
    fullTrack: {
        flexDirection: 'row'
    },
    track: {
        ...Platform.select({
            ios: {
                height: 2,
                borderRadius: 2,
                backgroundColor: '#A7A7A7'
            },
            android: {
                height: 2,
                backgroundColor: '#CECECE'
            }
        })
    },
    selectedTrack: {
        ...Platform.select({
            ios: {
                backgroundColor: '#095FFF'
            },
            android: {
                backgroundColor: '#0D8675'
            }
        })
    }
});