添加滑动设置

packages/artplayer-document/docs/en/Questions/How_to_add_setting_panel.mdx

@@ -181,3 +181,79 @@ var art = new Artplayer({
     ],
 });
 ```
+
+## Add range slider
+
+| Property  | Type                | Description              |
+| --------- | ------------------- | ------------------------ |
+| `html`    | `String`、`Element` | DOM elements of selector |
+| `icon`    | `String`、`Element` | Icon of selector         |
+| `range`   | `Array`             | Range default state      |
+| `onRange` | `Function`          | Range change event       |
+| `tooltip` | `String`            | Tooltip text             |
+
+```js
+const range = [5, 1, 10, 1];
+const value = range[0];
+const min = range[1];
+const max = range[2];
+const step = range[3];
+```
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    settings: [
+        {
+            html: 'Range',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onRange: function (item) {
+                // Change the tooltip
+                return item.range + 'x';
+            },
+        },
+        {
+            html: 'Use with selector',
+            width: 240,
+            selector: [
+                {
+                    default: true,
+                    html: 'Setting 01',
+                },
+                {
+                    html: 'Setting 02',
+                },
+                {
+                    html: 'Setting 03',
+                    tooltip: '5x',
+                    range: [5, 1, 10, 1],
+                    onRange: function (item) {
+                        return item.range + 'x';
+                    },
+                },
+                {
+                    html: 'Setting 04',
+                    icon: '',
+                    tooltip: '5x',
+                    range: [5, 1, 10, 1],
+                    onRange: function (item) {
+                        return item.range + 'x';
+                    },
+                },
+            ],
+            onSelect: function (item) {
+                return item.html;
+            },
+        },
+    ],
+});
+```

packages/artplayer-document/docs/zh-cn/Questions/How_to_add_setting_panel.mdx

@@ -111,8 +111,6 @@ var art = new Artplayer({
 
 ## 添加切换按钮
 
-设置面板类似于列表选择的集合，而且支持多层嵌套
-
 | 属性       | 类型                | 描述            |
 | ---------- | ------------------- | --------------- |
 | `html`     | `String`、`Element` | 元素的 DOM 元素 |
@@ -183,3 +181,79 @@ var art = new Artplayer({
     ],
 });
 ```
+
+## 添加范围滑动
+
+| 属性      | 类型                | 描述            |
+| --------- | ------------------- | --------------- |
+| `html`    | `String`、`Element` | 元素的 DOM 元素 |
+| `icon`    | `String`、`Element` | 元素的图标      |
+| `range`   | `Array`             | 默认状态数组    |
+| `onRange` | `Function`          | 滑块滑动事件    |
+| `tooltip` | `String`            | 提示文本        |
+
+```js
+const range = [5, 1, 10, 1];
+const value = range[0];
+const min = range[1];
+const max = range[2];
+const step = range[3];
+```
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    settings: [
+        {
+            html: '滑块',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onRange: function (item) {
+                // 改变提示文本
+                return item.range + 'x';
+            },
+        },
+        {
+            html: '和列表组合',
+            width: 200,
+            selector: [
+                {
+                    default: true,
+                    html: '设置 01',
+                },
+                {
+                    html: '设置 02',
+                },
+                {
+                    html: '设置 03',
+                    tooltip: '5x',
+                    range: [5, 1, 10, 1],
+                    onRange: function (item) {
+                        return item.range + 'x';
+                    },
+                },
+                {
+                    html: '设置 04',
+                    icon: '',
+                    tooltip: '5x',
+                    range: [5, 1, 10, 1],
+                    onRange: function (item) {
+                        return item.range + 'x';
+                    },
+                },
+            ],
+            onSelect: function (item) {
+                return item.html;
+            },
+        },
+    ],
+});
+```