Appearance

iuiDesign
100%
02:32
本页目录

用于选择横轴上的数值。

基本使用 ​

滑动输入条的基本用法。

html
<iui-slider></iui-slider>
<iui-slider></iui-slider>

设置步长 ​

设置步长后，滑动输入条的值只能是步长的整数倍。

html
<iui-slider :step="5" popover="always"></iui-slider>
<iui-slider :step="5" popover="always"></iui-slider>

最大值 ​

设置最大值后，滑动输入条的值不能超过最大值。

html
<iui-slider :max="50" popover="always"></iui-slider>
<iui-slider :max="50" popover="always"></iui-slider>

设置单位 ​

设置单位后，滑动输入条的 popover 会显示单位。

html
<iui-slider popover="always" unit="MB"></iui-slider>
<iui-slider popover="always" unit="MB"></iui-slider>

线条粗细 ​

可以通过 lineHeight 属性设置线条的粗细。

html
<iui-slider lineHeight="4"></iui-slider>
<iui-slider lineHeight="4"></iui-slider>

线条颜色 ​

可以自定义线条和激活部分的颜色。

html
<iui-slider lineColor="#F53F3F" activeColor="#722ED1"></iui-slider>
<iui-slider lineColor="#F53F3F" activeColor="#722ED1"></iui-slider>

自定义滑块 ​

可以使用 thumb 插槽自定义滑块的样式。

html
<iui-slider v-model="value2" :popover="false">
  <!-- thumb 插槽会携带滑块当前值 -->
  <template #thumb="{ value }">
    <view
      :style="{
            background: '#165dff',
            padding: '1px 6px',
            borderRadius: '6px',
            fontSize: '14px',
            color: '#fff',
          }"
    >
      {{ value }}
    </view>
  </template>
</iui-slider>
<iui-slider v-model="value2" :popover="false">
  <!-- thumb 插槽会携带滑块当前值 -->
  <template #thumb="{ value }">
    <view
      :style="{
            background: '#165dff',
            padding: '1px 6px',
            borderRadius: '6px',
            fontSize: '14px',
            color: '#fff',
          }"
    >
      {{ value }}
    </view>
  </template>
</iui-slider>

自定义前缀和后缀 ​

可以使用 prefix 和 suffix 插槽自定义前缀和后缀。

html
<iui-slider v-model="value2">
  <template #prefix>
    <iui-icon name="audiostatic" color="gray" size="18"></iui-icon>
  </template>
  <template #suffix>
    <iui-icon name="audio" color="gray" size="18"></iui-icon>
  </template>
</iui-slider>
<iui-slider v-model="value2">
  <template #prefix>
    <iui-icon name="audiostatic" color="gray" size="18"></iui-icon>
  </template>
  <template #suffix>
    <iui-icon name="audio" color="gray" size="18"></iui-icon>
  </template>
</iui-slider>

API ​

<Slider>props
参数描述类型默认值
modelValue (v-model)当前值Number0
disabled是否禁用Booleanfalse
step步长Number1
popover是否显示气泡，默认为 true，滑动时显示，禁用时不显示。如果为 'always'，则气泡一直显示Boolean | alwaystrue
unit单位String-
max最大值Number100
lineColor线条颜色String#E5E6EB
activeColor激活态颜色String#165DFF
lineHeight线条高度Number2
<Slider>slots
插槽名描述参数
thumb自定义滑块value: modelValue
prefix自定义前缀-
suffix自定义后缀-