@tuya/miniapp-smart-ui 2.13.5-beta-0

package/dist/slider/README.md

@@ -0,0 +1,366 @@
+---
+category: 数据录入
+---
+
+# Slider 滑块
+
+### 介绍
+
+滑动输入条，用于在给定的范围内选择一个值。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-slider": "@tuya/miniapp-smart-ui/lib/normal-slider/index"
+}
+```
+
+## 代码演示
+
+### 普通滑动条
+
+> 注意 instanceId 值必选，需要设置为一个字符串值且不能数字开头，每个 slider 实例的 instanceId 不同
+
+```html
+<smart-slider
+  instanceId="slider1"
+  trackStyle="height:4px"
+  barStyle="height:4px"
+  value="{{currentValue}}"
+  bind:end="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 间隔滑动条
+
+设置 `step` 属性可开启间隔拖动模式
+
+```html
+<smart-slider
+  instanceId="slider2"
+  trackStyle="height:8px"
+  barStyle="height:8px"
+  thumbStyle="width:18px;height:18px;"
+  stepStyle="width:4px;height:4px;"
+  activeStepStyle="background:#fff;"
+  showSteps="{{true}}"
+  step="{{10}}"
+  min="{{0}}"
+  max="{{100}}"
+  value="{{currentValue}}"
+  bind:end="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 间隔滑动条隐藏滑块
+
+设置 `hideThumbButton` 为 `true` 可以隐藏滑块
+
+```html
+<smart-slider
+  instanceId="slider3"
+  trackStyle="height:40px;border-radius:16px;"
+  barStyle="height:40px;border-radius:16px;"
+  thumbStyle="width:18px;height:18px;"
+  stepStyle="width:4px;height:12px;border-radius:4px;"
+  activeStepStyle="width:4px;height:12px;border-radius:4px;background:#fff;"
+  hideThumbButton="{{true}}"
+  showSteps="{{true}}"
+  step="{{30}}"
+  min="{{0}}"
+  max="{{90}}"
+  value="{{currentValue}}"
+  bind:end="onChange"
+/>
+```
+
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 拖动滑动条
+
+设置 `parcel` 为true，可以使滑块包裹在滑条内。
+
+```html
+<smart-slider
+  instanceId="slider4"
+  parcel="{{true}}"
+  parcelMargin="{{2}}"
+  trackStyle="height:26px;border-radius:13px;"
+  barStyle="height:22px;border-radius:13px;"
+  thumbStyle="width:20px;height:20px;background:#fff;border-radius:50%;"
+  parcelThumbWidth="{{18}}"
+  parcelThumbHeight="{{18}}"
+  value="{{currentValue}}"
+  bind:end="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+
+### 拖动滑动条自定义样式1
+
+可通过 `trackStyle`、`barStyle`、`thumbStyle` 自定义滑槽、滑动条、滑块的样式
+
+```html
+<smart-slider
+  instanceId="slider5"
+  trackStyle="height:45px;border-radius:8px;"
+  barStyle="height:45px;border-radius:8px;"
+  thumbStyle="width:15px;height:50px;background:#BBC5D4;border:2px solid #FFFFFF;box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.5);border-radius:2px;"
+  value="{{currentValue}}"
+  bind:end="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+
+### 拖动滑动条自定义样式2
+
+```html
+<smart-slider
+  instanceId="slider6"
+  parcel="{{true}}"
+  parcelMargin="{{2}}"
+  trackStyle="height:26px;border-radius:5px;"
+  barStyle="height:22px;border-radius:5px;"
+  parcelThumbWidth="{{3}}"
+  parcelThumbHeight="{{16}}"
+  thumbStyle="width:5px;height:16px;background:#fff;"
+  value="{{currentValue}}"
+  bind:end="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 双滑块滑动条
+
+两个滑块的滑动条，需要引用：
+
+```json
+"usingComponents": {
+  "smart-range-slider": "@tuya/miniapp-smart-ui/lib/slider/index"
+}
+```
+
+添加 `range` 属性就可以开启双滑块模式，确保 `value` 的值是一个数组。
+
+```html
+<smart-range-slider
+  min="{{0}}"
+  max="{{100}}"
+  value="{{range}}"
+  bind:change="onRangeChange"
+  bar-height="4px"
+  inactive-color="#D8D9DC"
+  active-color="#007AFF"
+/>
+```
+
+```js
+Page({
+  data: {
+    range: [10, 40],
+  },
+  onRangeChange(event) {
+    this.setData({
+      range: event.detail,
+    });
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数                             | 说明                                   | 类型         | 默认值   |
+| -------------------------------- | -------------------------------------- | ------------ | -------- |
+| active-step-style                | 激活阶段样式                           | _string_     | null     |
+| bar-style                        | 滑条样式                               | _string_     | null     |
+| class-name                       | css 样式名                             | _string_     | null     |
+| direction                        | 滑条方向（"horizontal"                 | "vertical"） | _string_ | null |
+| disable                          | 是否禁用滑块                           | _boolean_    | false    |
+| enable-touch                     | 是否启用触摸跳跃                       | _boolean_    | true     |
+| enable-touch-bar                 | 是否启用触摸 bar 增加偏移              | _boolean_    | false    |
+| hidden                           | 是否隐藏组件                           | _boolean_    | null     |
+| hide-bar-on-first-render         | 是否在首次渲染时隐藏 bar               | _boolean_    | false    |
+| hide-thumb                       | 是否隐藏滑块                           | _boolean_    | false    |
+| hide-thumb-button                | 是否隐藏 thumb 按钮                    | _boolean_    | false    |
+| hot-area-style                   | 点击热区样式                           | _string_     | null     |
+| instance-id                      | 唯一 ID                                | _string_     | null     |
+| max                              | 最大值                                 | _number_     | 100      |
+| min                              | 最小值                                 | _number_     | 0        |
+| parcel                           | 是否启用 parcel 模式                   | _boolean_    | false    |
+| parcel-margin                    | parcel 模式下滑块边距                  | _number_     | 0        |
+| parcel-thumb-height              | parcel 模式下滑块高度                  | _number_     | null     |
+| parcel-thumb-width               | parcel 模式下滑块宽度                  | _number_     | null     |
+| reverse                          | 是否反转滑条                           | _boolean_    | false    |
+| show-steps                       | 是否显示阶段提示                       | _boolean_    | false    |
+| show-text                        | 是否在 bar 上显示文本                  | _boolean_    | null     |
+| step                             | 阶段值                                 | _number_     | 1        |
+| step-style                       | 阶段样式                               | _string_     | null     |
+| text-style                       | 文本样式                               | _string_     | null     |
+| text-template                    | 文本格式化模板，例如 "比率 {{text}} %" | _string_     | null     |
+| thumb-height                     | 滑块高度                               | _number_     | null     |
+| thumb-style                      | 滑块样式                               | _string_     | null     |
+| thumb-style-calc                 | 动态计算 thumb 样式                    | _null_       | null     |
+| thumb-style-render-formatter     | 自定义 thumb 样式渲染格式化函数        | _null_       | null     |
+| thumb-style-render-value-reverse | 是否反转 thumb 样式渲染的值            | _boolean_    | false    |
+| thumb-style-render-value-scale   | 自定义 thumb 样式渲染时的值缩放比例    | _number_     | 1        |
+| thumb-style-render-value-start   | 自定义 thumb 样式渲染时的起始值        | _number_     | 1        |
+| thumb-width                      | 滑块宽度                               | _number_     | null     |
+| thumb-wrap-style                 | 滑块包装样式                           | _null_       | null     |
+| track-style                      | 轨道样式                               | _string_     | null     |
+| value                            | 右滑块初始值/单向滑条初始值            | _number_     | 0        |
+
+### Slot
+
+| 名称  | 说明     |
+| ----- | -------- |
+| bar `v.2.4.0` | 滑动条插槽 |
+| thumb `v.2.4.0` | 滑块插槽 |
+
+### Events
+
+| 事件名      | 说明         | 参数                         |
+| ----------- | ------------ | ---------------------------- |
+| bind:change | 值改变后触发 | event.detail.value: 当前进度 |
+| bind:end    | 拖动松手触发 | event.detail.value: 当前进度 |
+| bind:start  | 拖动前触发   | event.detail.value: 当前进度 |
+
+## 双滑块滑动条 API
+
+### 双滑块滑动条 Props
+
+| 参数              | 说明                                     | 类型                 | 默认值    |
+| ----------------- | ---------------------------------------- | -------------------- | --------- |
+| active-color      | 进度条激活态颜色                         | _string_             | `#1989fa` |
+| bar-height        | 进度条高度，默认单位为 `px`              | _string \| number_   | `2px`     |
+| disabled          | 是否禁用滑块                             | _boolean_            | `false`   |
+| inactive-color    | 进度条默认颜色                           | _string_             | `#e5e5e5` |
+| max               | 最大值                                   | _number_             | `100`     |
+| min               | 最小值                                   | _number_             | `0`       |
+| range `v1.8.4`    | 是否开启双滑块模式                       | _boolean_            | `false`   |
+| step              | 步长                                     | _number_             | `1`       |
+| use-button-slot   | 是否使用按钮插槽                         | _boolean_            | `false`   |
+| value             | 当前进度百分比，在双滑块模式下为数组格式 | _number \| number[]_ | `0`       |
+| vertical `v1.8.5` | 是否垂直展示                             | _boolean_            | `false`   |
+
+### 双滑块滑动条 Events
+
+| 事件名          | 说明             | 参数                         |
+| --------------- | ---------------- | ---------------------------- |
+| bind:change     | 进度值改变后触发 | event.detail: 当前进度       |
+| bind:drag       | 拖动进度条时触发 | event.detail.value: 当前进度 |
+| bind:drag-end   | 结束拖动时触发   | -                            |
+| bind:drag-start | 开始拖动时触发   | -                            |
+
+### 双滑块滑动条外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 双滑块滑动条 Slots
+
+| 名称                  | 说明                                | 参数                |
+| --------------------- | ----------------------------------- | ------------------- |
+| button                | 自定义滑块按钮                      | _{ value: number }_ |
+| left-button `v1.8.4`  | 自定义左侧滑块按钮（双滑块模式下）  | _{ value: number }_ |
+| right-button `v1.8.4` | 自定义右侧滑块按钮 （双滑块模式下） | _{ value: number }_ |
+
+### 样式变量
+
+双滑块滑动条样式变量  
+  
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --slider-active-background-color  | _#1989fa_                               | 活动状态背景颜色   |
+| --slider-inactive-background-color| _#ebedf0_                               | 非活动状态背景颜色 |
+| --slider-disabled-opacity         | _0.3_                                   | 禁用状态透明度     |
+| --slider-bar-height               | _2px_                                   | 滑动条高度         |
+| --slider-button-width             | _24px_                                  | 滑块按钮宽度       |
+| --slider-button-height            | _24px_                                  | 滑块按钮高度       |
+| --slider-button-border-radius     | _50%_                                   | 滑块按钮边框圆角   |
+| --slider-button-background-color  | _#fff_                                  | 滑块按钮背景颜色   |
+| --slider-button-box-shadow        | _0 1px 2px rgba(0, 0, 0, 0.5)_          | 滑块按钮阴影       |
+| --slider-thumb-color              | _var(--app-B3, #ffffff)_                | 滑块拇指颜色       |

package/dist/slider/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-slider{background-color:var(--slider-inactive-background-color,#ebedf0);border-radius:999px;height:var(--slider-bar-height,2px);position:relative}.smart-slider:before{bottom:calc(var(--padding-xs, 8px)*-1);content:"";left:0;position:absolute;right:0;top:calc(var(--padding-xs, 8px)*-1)}.smart-slider__bar{background-color:var(--slider-active-background-color,#1989fa);border-radius:inherit;height:100%;position:relative;transition:all .2s;width:100%}.smart-slider__button{background-color:var(--slider-button-background-color,#fff);border-radius:var(--slider-button-border-radius,50%);box-shadow:var(--slider-button-box-shadow,0 1px 2px rgba(0,0,0,.5));height:var(--slider-button-height,24px);width:var(--slider-button-width,24px)}.smart-slider__button-wrapper,.smart-slider__button-wrapper-right{position:absolute;right:0;top:50%;transform:translate3d(50%,-50%,0)}.smart-slider__button-wrapper-left{left:0;position:absolute;top:50%;transform:translate3d(-50%,-50%,0)}.smart-slider--disabled{opacity:var(--slider-disabled-opacity,.3)}.smart-slider--vertical{display:inline-block;height:100%;width:var(--slider-bar-height,2px)}.smart-slider--vertical .smart-slider__button-wrapper,.smart-slider--vertical .smart-slider__button-wrapper-right{bottom:0;right:50%;top:auto;transform:translate3d(50%,50%,0)}.smart-slider--vertical .smart-slider__button-wrapper-left{left:auto;right:50%;top:0;transform:translate3d(50%,-50%,0)}.smart-slider--vertical:before{bottom:0;left:-8px;right:-8px;top:0}

package/dist/slider/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/slider/index.js

@@ -0,0 +1,239 @@
+import { SmartComponent } from '../common/component';
+import { touch } from '../mixins/touch';
+import { canIUseModel } from '../common/version';
+import { getRect, addUnit, nextTick, addNumber, clamp } from '../common/utils';
+import ty from '../common/ty';
+const DRAG_STATUS = {
+    START: 'start',
+    MOVING: 'moving',
+    END: 'end',
+};
+SmartComponent({
+    mixins: [touch],
+    props: {
+        range: {
+            type: Boolean,
+            value: true,
+        },
+        disabled: Boolean,
+        useButtonSlot: Boolean,
+        activeColor: String,
+        inActiveColor: String,
+        inactiveColor: String,
+        max: {
+            type: Number,
+            value: 100,
+        },
+        min: {
+            type: Number,
+            value: 0,
+        },
+        step: {
+            type: Number,
+            value: 1,
+        },
+        value: {
+            type: null,
+            value: 0,
+            observer(val) {
+                if (val !== this.value) {
+                    this.updateValue(val);
+                }
+            },
+        },
+        vertical: Boolean,
+        barHeight: null,
+    },
+    created() {
+        this.updateValue(this.data.value);
+    },
+    // @ts-ignore
+    lastMinValue: null,
+    // @ts-ignore
+    lastMaxValue: null,
+    methods: {
+        onTouchStart(event) {
+            if (this.data.disabled)
+                return;
+            const { index } = event.currentTarget.dataset;
+            if (typeof index === 'number') {
+                this.buttonIndex = index;
+            }
+            this.touchStart(event);
+            this.startValue = this.format(this.value);
+            this.newValue = this.value;
+            if (this.isRange(this.newValue)) {
+                this.startValue = this.newValue.map(val => this.format(val));
+            }
+            else {
+                this.startValue = this.format(this.newValue);
+            }
+            this.dragStatus = DRAG_STATUS.START;
+        },
+        onTouchMove(event) {
+            if (this.data.disabled)
+                return;
+            if (this.dragStatus === DRAG_STATUS.START) {
+                this.$emit('drag-start');
+            }
+            this.touchMove(event);
+            this.dragStatus = DRAG_STATUS.MOVING;
+            getRect(this, '.smart-slider').then(rect => {
+                const { vertical } = this.data;
+                const delta = vertical ? this.deltaY : this.deltaX;
+                const total = vertical ? rect.height : rect.width;
+                const diff = (delta / total) * this.getRange();
+                if (this.isRange(this.startValue)) {
+                    this.newValue[this.buttonIndex] =
+                        this.startValue[this.buttonIndex] + diff;
+                }
+                else {
+                    this.newValue = this.startValue + diff;
+                }
+                this.updateValue(this.newValue, false, true);
+            });
+        },
+        onTouchEnd() {
+            if (this.data.disabled)
+                return;
+            if (this.dragStatus === DRAG_STATUS.MOVING) {
+                this.dragStatus = DRAG_STATUS.END;
+                nextTick(() => {
+                    this.updateValue(this.newValue, true);
+                    this.$emit('drag-end');
+                });
+            }
+        },
+        onClick(event) {
+            if (this.data.disabled)
+                return;
+            const { min } = this.data;
+            getRect(this, '.smart-slider').then(rect => {
+                const { vertical } = this.data;
+                const touch = event.touches[0];
+                const delta = vertical ? touch.clientY - rect.top : touch.clientX - rect.left;
+                const total = vertical ? rect.height : rect.width;
+                const value = Number(min) + (delta / total) * this.getRange();
+                if (this.isRange(this.value)) {
+                    const [left, right] = this.value;
+                    const middle = (left + right) / 2;
+                    if (value <= middle) {
+                        this.updateValue([value, right], true);
+                    }
+                    else {
+                        this.updateValue([left, value], true);
+                    }
+                }
+                else {
+                    this.updateValue(value, true);
+                }
+            });
+        },
+        isRange(val) {
+            const { range } = this.data;
+            return range && Array.isArray(val);
+        },
+        handleOverlap(value) {
+            if (value[0] > value[1]) {
+                return value.slice(0).reverse();
+            }
+            return value;
+        },
+        updateValue(value, end, drag) {
+            if (this.isRange(value)) {
+                value = this.handleOverlap(value).map(val => this.format(val));
+            }
+            else {
+                value = this.format(value);
+            }
+            this.value = value;
+            const { vertical } = this.data;
+            const mainAxis = vertical ? 'height' : 'width';
+            this.setData({
+                wrapperStyle: `
+          background: ${this.data.inactiveColor || this.data.inActiveColor || ''};
+          ${vertical ? 'width' : 'height'}: ${addUnit(this.data.barHeight) || ''};
+        `,
+                barStyle: `
+          ${mainAxis}: ${this.calcMainAxis()};
+          left: ${vertical ? 0 : this.calcOffset()};
+          top: ${vertical ? this.calcOffset() : 0};
+          ${drag ? 'transition: none;' : ''}
+        `,
+            });
+            if (Array.isArray(value)) {
+                const nextMinValue = value[0];
+                const nextMaxValue = value[1];
+                if (this.lastMinValue !== null) {
+                    if (this.lastMinValue !== nextMinValue) {
+                        const isMin = value[0] === this.data.min;
+                        if (isMin) {
+                            ty.selectionVibrate();
+                        }
+                    }
+                }
+                if (this.lastMaxValue !== null) {
+                    if (this.lastMaxValue !== nextMaxValue) {
+                        const isMax = value[1] === this.data.max;
+                        if (isMax) {
+                            ty.vibrateShort({ type: 'medium' });
+                        }
+                    }
+                }
+                this.lastMinValue = nextMinValue;
+                this.lastMaxValue = nextMaxValue;
+            }
+            else {
+                // 单值模式不需要震动
+            }
+            if (drag) {
+                this.$emit('drag', { value });
+            }
+            if (end) {
+                this.$emit('change', value);
+            }
+            if ((drag || end) && canIUseModel()) {
+                this.setData({ value });
+            }
+        },
+        getScope() {
+            return Number(this.data.max) - Number(this.data.min);
+        },
+        getRange() {
+            const { max, min } = this.data;
+            return max - min;
+        },
+        getOffsetWidth(current, min) {
+            const scope = this.getScope();
+            // 避免最小值小于最小step时出现负数情况
+            return `${Math.max(((current - min) * 100) / scope, 0)}%`;
+        },
+        // 计算选中条的长度百分比
+        calcMainAxis() {
+            const { value } = this;
+            const { min } = this.data;
+            if (this.isRange(value)) {
+                return this.getOffsetWidth(value[1], value[0]);
+            }
+            return this.getOffsetWidth(value, Number(min));
+        },
+        // 计算选中条的开始位置的偏移量
+        calcOffset() {
+            const { value } = this;
+            const { min } = this.data;
+            const scope = this.getScope();
+            if (this.isRange(value)) {
+                return `${((value[0] - Number(min)) * 100) / scope}%`;
+            }
+            return '0%';
+        },
+        format(value) {
+            const min = +this.data.min;
+            const max = +this.data.max;
+            const step = +this.data.step;
+            value = clamp(value, min, max);
+            const diff = Math.round((value - min) / step) * step;
+            return addNumber(min, diff);
+        },
+    },
+});

package/dist/slider/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/dist/slider/index.wxml

@@ -0,0 +1,68 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="../wxs/style.wxs" module="style" />
+
+<view
+  class="custom-class {{ utils.bem('slider', { disabled, vertical }) }}"
+  style="{{ wrapperStyle }}"
+  bind:tap="onClick"
+>
+  <view
+    class="{{ utils.bem('slider__bar') }}"
+    style="{{ barStyle }}; {{ style({ backgroundColor: activeColor }) }}"
+  >
+    <view
+      wx:if="{{ range }}"
+      class="{{ utils.bem('slider__button-wrapper-left') }}"
+      data-index="{{ 0 }}"
+      bind:touchstart="onTouchStart"
+      catch:touchmove="onTouchMove"
+      bind:touchend="onTouchEnd"
+      bind:touchcancel="onTouchEnd"
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="left-button"
+      />
+      <view
+        wx:else
+        class="{{ utils.bem('slider__button') }}"
+      />
+    </view>
+    <view
+      wx:if="{{ range }}"
+      class="{{ utils.bem('slider__button-wrapper-right') }}"
+      data-index="{{ 1 }}"
+      bind:touchstart="onTouchStart"
+      catch:touchmove="onTouchMove"
+      bind:touchend="onTouchEnd"
+      bind:touchcancel="onTouchEnd"
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="right-button"
+      />
+      <view
+        wx:else
+        class="{{ utils.bem('slider__button') }}"
+      />
+    </view>
+
+    <view
+      wx:if="{{ !range }}"
+      class="{{ utils.bem('slider__button-wrapper') }}"
+      bind:touchstart="onTouchStart"
+      catch:touchmove="onTouchMove"
+      bind:touchend="onTouchEnd"
+      bind:touchcancel="onTouchEnd"
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="button"
+      />
+      <view
+        wx:else
+        class="{{ utils.bem('slider__button') }}"
+      />
+    </view>
+  </view>
+</view>