6.7 滑动条（Slider Bar）

选择线性取值范围中某个具体的值（整数），或者选取一个取值范围

实例

基础用法

<template>
  <div class="wrapper">
    <scroller class="scroller">
      <title title="dof-slider-bar"></title>
      <category title="使用案例"></category>
      <div class="wrapper">
        <div class="demo-container">
          <text class="label">单滑块水平选择条</text>
          <text class="value-text">取值：{{barValue}}</text>
          <dof-slider-bar v-bind="sliderBarCfg1" @update-value="updateValue"></dof-slider-bar>
        </div>
        <div class="demo-container">
          <text class="label">双滑块范围水平选择条</text>
          <text class="value-text">取值范围：{{minValue}} --- {{maxValue}}</text>
          <dof-slider-bar v-bind="sliderBarCfg2" @update-value="updateValue"></dof-slider-bar>
        </div>
        <div class="demo-container">
          <text class="label">单滑块水平选择条禁用</text>
          <dof-slider-bar v-bind="sliderBarCfg3"></dof-slider-bar>
        </div>
        <div class="demo-container">
          <text class="label">双滑块水平范围选择条禁用</text>
          <dof-slider-bar v-bind="sliderBarCfg4"></dof-slider-bar>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
import { DofSliderBar } from 'dolphin-intl-ui'

export default {
  components: { DofSliderBar },
  data: () => ({
      barValue: 0,
      minValue: 0,
      maxValue: 0,
      sliderBarCfg1: {
        length: 400,
        range: false,
        min: 0,
        max: 10000,
        value: 2000,
        defaultValue: 50,
        disabled: false
      },
      sliderBarCfg2: {
        length: 500,
        range: true,
        min: 0,
        max: 100,
        value: [20, 70],
        defaultValue: [30, 60],
        disabled: false
      },
      sliderBarCfg3: {
        length: 400,
        range: false,
        min: 0,
        max: 200,
        value: 50,
        defaultValue: 100,
        disabled: true
      },
      sliderBarCfg4: {
        length: 500,
        range: true,
        min: 0,
        max: 200,
        value: 20,
        defaultValue: [20, 70],
        disabled: true
      }
    }),
    created() {
      setTitle('SliderBar');
      this.barValue = this.sliderBarCfg1.value || this.sliderBarCfg1.defaultValue;
      this.minValue = this.sliderBarCfg2.value[0] || this.sliderBarCfg1.defaultValue[0];
      this.maxValue = this.sliderBarCfg2.value[1] || this.sliderBarCfg1.defaultValue[1];
    },
    methods: {
      updateValue(value) {
        if (typeof value === 'number') {
          this.barValue = value;
        } else if (value.length && value.length === 2) {
          this.minValue = value[0];
          this.maxValue = value[1];
        }
      }
    }
}
</script>

Attributes

Prop	Type	Required	Default	Description
length	Number	N	500	滑条长度
height	Number	N	4	滑条高度
range	Boolean	N	false	是否选择范围
min	Number	N	0	滑条最小值
max	Number	N	100	滑条最大值
min-diff	Number	N	5	范围选择时的最小差值
value	Number | Array	N	0	当前取值；range=true 时使用 [min, max]
default-value	Number | Array	N	0	初始取值；range=true 时使用 [min, max]
disabled	Boolean	N	false	是否禁用
invalid-color	String	N	''	未选中轨道颜色
valid-color	String	N	#00A4F2	已选中轨道颜色
disabled-color	String	N	''	禁用时已选中轨道颜色
select-range	Array	N	[0, 0]	范围选择的当前值；通常由组件内部维护，建议使用 update-value 接收变更
need-dark-mode	Boolean	N	false	是否启用 M-dark/T-dark 内置暗黑适配
button-color	String	N	''	按钮 / 滑块背景色
button-border-color	String	N	''	滑块边框颜色
shadow-color	String	N	''	滑块阴影颜色
isRTL	Boolean	N	false	是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

RTL 下最小值位于右端，向左拖动增大数值；范围值和 updateValue 回调仍按 [min, max] 返回，无需反转数组。

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

Events

事件名	说明	回调参数
updateValue	滑动过程中的值更新	单滑块时为 Number；范围选择时为 [min, max]