# 滑杆

当设备可进行精细化的数值操作时，推荐使用本控件

交互原则

数值有较大的变化范围；数值变化控制的精确度要求相对较高；当变化间距很小时，可提供通过 + - 控件辅助操作；滑杆左右分别为可调整数值的最大和最小值，开关不与滑杆功能融合；滑杆支持点按（即可以通过点击直接调整到对应位置）和拖移

# 示例

<template>
  <div class="wrapper">
    <dof-minibar title="4.8滑杆"></dof-minibar>
    <scroller class="scroller">
      <div class="title-box">
        <text class="title-text">滑杆组件</text>
      </div>
      <div class="slider-box">
        <dof-slider class="mb40" v-model="value1" :min="10" :max="35"> </dof-slider>

        <dof-slider class="mb40" v-model="value1" :min="10" :max="35" :gradientBarConfig="gradientBarConfig">
        </dof-slider>

        <dof-step-action class="mb40" v-model="value1" :min="10" :max="35">
          <dof-slider v-model="value1" :min="10" :max="35">
            <dof-slider-scale :value="10">10℃</dof-slider-scale>
            <dof-slider-scale :value="15">15℃</dof-slider-scale>
            <dof-slider-scale :value="20">20℃</dof-slider-scale>
            <dof-slider-scale :value="25">25℃</dof-slider-scale>
            <dof-slider-scale :value="30">30℃</dof-slider-scale>
            <dof-slider-scale :value="35">35℃</dof-slider-scale>
          </dof-slider>
        </dof-step-action>

        <dof-slider class="mb40" v-model="value2" :min="10" :max="35" :gradientBarConfig="gradientBarConfig">
          <dof-slider-scale :value="10">10℃</dof-slider-scale>
          <dof-slider-scale :value="15">15℃</dof-slider-scale>
          <dof-slider-scale :value="20">20℃</dof-slider-scale>
          <dof-slider-scale :value="25">25℃</dof-slider-scale>
          <dof-slider-scale :value="30">30℃</dof-slider-scale>
          <dof-slider-scale :value="35">35℃</dof-slider-scale>
        </dof-slider>
        <div class="slider-flex-box">
          <text class="slider-text">00°</text>
          <dof-slider
            style="flex: 1"
            :gradientBarConfig="gradientBarConfig"
            v-model="value3"
            :min="10"
            :max="100"
          ></dof-slider>
          <text class="slider-text">100°</text>
        </div>
      </div>
      <div class="title-box">
        <text class="title-text">禁用态</text>
      </div>
      <div class="slider-box">
        <dof-slider
          class="mb40"
          :disabled="disabled"
          v-model="value4"
          :min="10"
          :max="35"
          :gradientBarConfig="gradientBarConfig"
        >
        </dof-slider>
        <div class="slider-flex-box mb40">
          <text class="slider-text">00°</text>
          <dof-slider
            :disabled="disabled"
            style="flex: 1"
            :gradientBarConfig="gradientBarConfig"
            v-model="value4"
            :min="10"
            :max="100"
          ></dof-slider>
          <text class="slider-text">100°</text>
        </div>
        <dof-slider :disabled="disabled" v-model="value4" :min="10" :max="35">
          <dof-slider-scale :value="10">10℃</dof-slider-scale>
          <dof-slider-scale :value="15">15℃</dof-slider-scale>
          <dof-slider-scale :value="20">20℃</dof-slider-scale>
          <dof-slider-scale :value="25">25℃</dof-slider-scale>
          <dof-slider-scale :value="30">30℃</dof-slider-scale>
          <dof-slider-scale :value="35">35℃</dof-slider-scale>
        </dof-slider>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.wrapper {
  background-color: #fff;
}
.title-box {
  padding: 32px;
  background-color: #e5e5e8;
}
.title-text {
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #000000;
  font-weight: 500;
}
.scroller {
  padding-bottom: 100px;
}
.slider-box {
  padding: 80px 32px;
}
.mb40 {
  margin-bottom: 40px;
}
.slider-flex-box {
  display: flex;
  flex-direction: row;
  padding: 0 10px;
  align-items: center;
}
.slider-text {
  color: #333;
  font-size: 32px;
  padding: 0 20px;
}

@media screen and (weex-theme: colmo) {
  .wrapper {
    background-color: #151617;
  }
  .slider-text {
    color: rgb(102, 102, 102);
  }
}
</style>

<script>
import { DofMinibar, DofSliderScale, DofStepAction, DofSlider } from 'dolphin-weex-ui'
export default {
  components: { DofMinibar, DofSlider, DofSliderScale, DofStepAction },
  data: () => ({
    gradientBarConfig: { start: '#222324', end: '#fff' },
    value1: 20,
    value2: 20,
    value3: 30,
    value4: 20,
    disabled: true
  }),
  created() {}
}
</script>

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

# Api

# Props

参数	说明	类型	默认值	是否必须
value(v-model)	当前值，传入`number`类型为单侧滑杆，传入`array`类型为双侧滑杆	number \| array	`0`	`是`
min	最小值	number	`0`	`-`
max	最大值	number	`100`	`-`
step	步长	number	`1`	`-`
button-size	滑动条按钮尺寸	number	`40`	`-`
button-color	滑动条按钮颜色	string	`#ffffff`	`-`
disabled	滑动条是否禁用	boolean	`false`	`-`
gradientBarConfig	渐变条配置（优先级最高）	object	`{ start: '#124AFE', mid: '#ffffff', end: '#E55225' }`	目前只支持3种颜色渐变

# gradientBarConfig

参数	说明	类型	默认值	是否必须
start	渐变左端颜色	string	`''`	`-`
mid	渐变中间颜色	string	`''`	`不传为2种颜色渐变`
end	渐变右端颜色	string	`''`	`-`

# Events

事件名称	说明	回调参数
input	滑块滑动时触发	e: Number
change	滑动结束且组件值有变化时触发	e: Number

# Slots

插槽名	说明
default	自定义滑动条刻度

# SliderScale

# Props

参数	说明	类型	默认值	是否必须
value	刻度	number	`0`	`是`

# Slots

名称	说明
default	自定义刻度文本内容

点我扫二维码查看demo

← 4.7 步骤条（Progress bar） 4.9 搜索框（Search box） →