#### 默认值

```js
<Range defaultValue={[0, 10]}/>
```

#### 设定值

```js
<Range defaultValue={[0, 0]} value={[10, 20]} />
```

#### 设定单位

```js
<Range
  defaultValue={[0, 0]}
  value={[10, 20]}
  unit="米"
  onChange={() => console.log(1)}
/>
```

#### 隐藏 Label

```js
<Range defaultValue={[0, 0]} value={[10, 20]} hideStepLabel={true} />
```

#### 设定标记

```js
<Range defaultValue={[0, 0]} value={[10, 20]} marks={{ "50": "hahaha" }} />
```

#### 设定步数

```js
<Range defaultValue={[0, 0]} value={[10, 20]} step={10} />
```

#### 设定 pushable

pushable 可以设置为 true，以便在移动手柄时推动周围的手柄。当设置为数字时，数字将是手柄之间的最小保证距离

```js
const useState = require("react").useState;

function RangeTest() {
  const [value, setValue] = useState([10, 20]);

  return <Range value={value} onChange={setValue} pushable={true} />;
}
<RangeTest />;
```

#### 设置圆点之间轨道样式

```js
<Range
  defaultValue={[10, 20]}
  trackStyle={[
    { backgroundColor: "red", height: 4 },
    { backgroundColor: "blue", height: 4 },
  ]}
/>
```

#### 设置圆点两边轨道样式

```js
<Range
  defaultValue={[10, 20]}
  railStyle={{ backgroundColor: "#ffeeee", height: 4 }}
/>
```

#### 设置标记的样式

```js
<Range
  defaultValue={[10, 80]}
  activeDotStyle={{ borderColor: "red" }}
  marks={{ "50": "hahaha" }}
/>
```

#### 设置滑动圆点的样式

```js
<Range
  defaultValue={[10, 20]}
  handleStyle={[
    {
      borderColor: "green",
      height: 14,
      width: 14,
      backgroundColor: "#fff",
      boxShadow: "0 2px 4px rgba(0, 0, 0, 0)",
    },
    {
      borderColor: "pink",
      height: 14,
      width: 14,
      backgroundColor: "#fff",
      boxShadow: "0 2px 4px rgba(0, 0, 0, 0)",
    },
  ]}
/>
```
