Win Design

Slider 滑块

代码演示

默认
0
100
自定义值
10
25
自定义颜色
0
100
格式化 Tooltip
0
100
隐藏 Tooltip
0
100
禁用
0
100

基础用法

默认用法

查看代码 < />

<template>
  <section class="slider-demo">
      <w-row :gutter="20">
        <w-col :span="4">
          <span>默认</span>
        </w-col>
        <w-col :span="20">
          <w-slider v-model="value1"></w-slider>
        </w-col>
      </w-row>
      <w-row :gutter="20">
        <w-col :span="4">
          <span>自定义值</span>
        </w-col>
        <w-col :span="20">
          <w-slider v-model="value6" :min="10" :max="25"></w-slider>
        </w-col>
      </w-row>
      <w-row :gutter="20">
        <w-col :span="4">
          <span>自定义颜色</span>
        </w-col>
        <w-col :span="20">
          <w-slider v-model="value3" theme-color="#40998A"></w-slider>
        </w-col>
      </w-row>
      <w-row :gutter="20">
        <w-col :span="4">
          <span>格式化 Tooltip</span>
        </w-col>
        <w-col :span="20">
          <w-slider v-model="value4" :format-tooltip="formatTooltip"></w-slider>
        </w-col>
      </w-row>
      <w-row :gutter="20">
        <w-col :span="4">
          <span>隐藏 Tooltip</span>
        </w-col>
        <w-col :span="20">
          <w-slider v-model="value5" :show-tooltip="false"></w-slider>
        </w-col>
      </w-row>
      <w-row :gutter="20">
        <w-col :span="4">
          <span>禁用</span>
        </w-col>
        <w-col :span="20">
          <w-slider v-model="value2" disabled></w-slider>
        </w-col>
      </w-row>
  </section>
</template>

<script>
export default {
  data () {
    return {
      value1: 0,
      value2: 10,
      value3: 20,
      value4: 5,
      value5: 30,
      value6: 22
    }
  },
  methods: {
    formatTooltip(val) {
      return val / 100;
    }
  },
}
</script>
显示间断点
0
100
不显示间断点
0
100

步长设置

默认用法

查看代码 < />

<template>
  <section class="slider-demo">
      <w-row :gutter="20">
        <w-col :span="4">
          <span>显示间断点</span>
        </w-col>
        <w-col :span="20">
          <w-slider v-model="value1" :step="10" show-stops></w-slider>
        </w-col>
      </w-row>
      <w-row :gutter="20">
        <w-col :span="4">
          <span>不显示间断点</span>
        </w-col>
        <w-col :span="20">
          <w-slider v-model="value2" :step="10"></w-slider>
        </w-col>
      </w-row>
  </section>
</template>

<script>
export default {
  data () {
    return {
      value1: 0,
      value2: 10,
    }
  },
  methods: {
  },
}
</script>
0
100

带输入框的滑块

和输入框数据同步

查看代码 < />

<template>
  <section class="slider-demo">
      <w-row :gutter="20">
        <w-col :span="18">
          <w-slider v-model="value1"></w-slider>
        </w-col>
        <w-col :span="6">
          <w-input-number v-model="value1"></w-input-number>
        </w-col>
      </w-row>
  </section>
</template>

<script>
export default {
  data () {
    return {
      value1: 10,
    }
  },
  methods: {
  },
}
</script>
0
100

垂直

垂直方向的滑块, 此时必须设置高度height属性

查看代码 < />

<template>
  <section class="slider-demo">
      <w-slider v-model="value1" vertical height="200px"></w-slider>
  </section>
</template>

<script>
export default {
  data () {
    return {
      value1: 10,
    }
  },
  methods: {
  },
}
</script>
0
0%
15%
37%
50%
100

带标签的滑块

设置marks属性可以展示标记

查看代码 < />

<template>
  <section class="slider-demo">
      <w-slider v-model="value1" :marks="marks" range></w-slider>
  </section>
</template>

<script>
export default {
  data () {
    return {
      value1: [10, 30],
      marks: {
        0: '0%',
        15: '15%',
        37: '37%',
        50: {
          style: {
            color: '#0F49ED'
          },
          label: this.$createElement('strong', '50%')
        }
      }
    }
  },
  methods: {
  },
}
</script>
默认
0
100

范围

支持选择某一数值范围

查看代码 < />

<template>
  <section class="slider-demo">
      <w-row :gutter="20">
        <w-col :span="4">
          <span>默认</span>
        </w-col>
        <w-col :span="20">
          <w-slider v-model="value1" range show-stops :step="10"></w-slider>
        </w-col>
      </w-row>
  </section>
</template>

<script>
export default {
  data () {
    return {
      value1: [40, 80],
    }
  },
  methods: {
  },
}
</script>

API

Attributes

参数 说明 类型 可选值 默认值
value / v-model 绑定值 number — 0
min 最小值 number — 0
max 最大值 number — 100
disabled 是否禁用 boolean — false
step 步长 number — 1
show-stops 是否显示间断点 boolean — false
show-tooltip 是否显示 tooltip boolean — true
format-tooltip 格式化 tooltip message function(value) — —
range 是否为范围选择 boolean — false
vertical 是否竖向模式 boolean — false
height Slider 高度，竖向模式时必填 string — —
label 屏幕阅读器标签 string — —
tooltip-class tooltip 的自定义类名 string — —
marks 标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式 object — —
theme-color 主题颜色 string — —

Events

事件名称 说明 回调参数
change 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） 改变后的值
input 数据改变时触发（使用鼠标拖曳时，活动过程实时触发） 改变后的值

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 3/17/2020, 8:46:00 PM

← Tree-select 选择器 →