slider/docs/examples/editable.tsx at b86d1695bbe045be127c2cc806add269e048fe56 · react-component/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
/* eslint react/no-multi-comp: 0, no-console: 0 */
import Slider from 'rc-slider';
import React from 'react';
import '../../assets/index.less';

const style: React.CSSProperties = {
  width: 400,
  margin: 50,
};

export default () => {
  const [value, setValue] = React.useState([0, 50, 80]);

  return (
    <div>
      <div style={style}>
        <Slider
          // range
          range={{
            editable: true,
          }}
          track={false}
          min={0}
          max={100}
          value={value}
          // defaultValue={null}
          onChange={(nextValue) => {
            console.error('Change:', nextValue);
            setValue(nextValue as any);
          }}
          onChangeComplete={(nextValue) => {
            console.log('Complete', nextValue);
          }}
          styles={{
            rail: {
              background: `linear-gradient(to right, blue, red)`,
            },
          }}
        />
      </div>
    </div>
  );
};