slider/docs/examples/vertical.tsx at 873a4eec9345a160397873df685e75c31af2bf0e · EmilyyyLiu/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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import Slider from '@rc-component/slider';
import React from 'react';
import '../../assets/index.less';

const style: React.CSSProperties = {
  float: 'left',
  width: 160,
  height: 400,
  marginBottom: 160,
  marginLeft: 50,
};

const parentStyle: React.CSSProperties = {
  overflow: 'hidden',
};

const marks = {
  '-10': '-10°C',
  0: <strong>0°C</strong>,
  26: '26°C',
  37: '37°C',
  50: '50°C',
  100: {
    style: {
      color: 'red',
    },
    label: <strong>100°C</strong>,
  },
};

function log(value) {
  console.log(value); //eslint-disable-line
}

export default () => (
  <div style={parentStyle}>
    <div style={style}>
      <p>Slider with marks, `step=null`</p>
      <Slider vertical min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />
    </div>
    <div style={style}>
      <p>Slider with marks, `step=null` and `startPoint=0`</p>
      <Slider
        vertical
        min={-10}
        startPoint={0}
        marks={marks}
        step={null}
        onChange={log}
        defaultValue={20}
      />
    </div>
    <div style={style}>
      <p>Reverse Slider with marks, `step=null`</p>
      <Slider
        vertical
        min={-10}
        marks={marks}
        step={null}
        onChange={log}
        defaultValue={20}
        reverse
      />
    </div>
    <div style={style}>
      <p>Slider with marks and steps</p>
      <Slider vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
    </div>
    <div style={style}>
      <p>Slider with marks, `included=false`</p>
      <Slider vertical min={-10} marks={marks} included={false} defaultValue={20} />
    </div>
    <div style={style}>
      <p>Slider with marks and steps, `included=false`</p>
      <Slider vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />
    </div>
    <div style={style}>
      <p>Range with marks</p>
      <Slider range vertical min={-10} marks={marks} onChange={log} defaultValue={[20, 40]} />
    </div>
    <div style={style}>
      <p>Range with marks and steps</p>
      <Slider
        range
        vertical
        min={-10}
        marks={marks}
        step={10}
        onChange={log}
        defaultValue={[20, 40]}
      />
    </div>
    <div style={style}>
      <p>Range with marks and draggableTrack</p>
      <Slider
        range={{ draggableTrack: true }}
        vertical
        min={-10}
        marks={marks}
        onChange={log}
        defaultValue={[20, 40]}
      />
    </div>
    <div style={style}>
      <p>Range with marks and draggableTrack(reverse)</p>
      <Slider
        range={{ draggableTrack: true }}
        vertical
        reverse
        min={-10}
        marks={marks}
        onChange={log}
        defaultValue={[20, 40]}
      />
    </div>
  </div>
);