Slider 滑块

一、概述

定义

允许用户通过拖动滑块从一系列的值中进行选择。

使用场景

• 当用户需要在数值区间/自定义区间内进行选择时，可为连续或间续值

• 调整反映强度级别（如音量、亮度或色彩饱和度）的设置组件

类型

• 连续滑块

• 间续滑块

二、连续滑块

连续滑块允许用户在主观范围内选择一个值。

交互说明

1.鼠标 hover/长按滑块，出现 tooltips 提示用户当前数值

2.滑条左侧为最小值，滑块的右侧为最大值

3.松开鼠标，选择操作即完成

<div style="width: 500px;">
  <h5>默认</h5>
  <se-slider />
  <br />
  <h5>自定义初始值</h5>
  <se-slider :value="50" />
  <br />
  <h5>显示tooltip</h5>
  <se-slider show-value :value="36" />
  <br />
  <h5>拖动触发事件</h5>
  <se-slider @change="onChange" :value="48" />
  <br />
  <h5>禁用状态连续滑块</h5>
  <se-slider disabled :value="42" />
</div>
<script>
  export default {
    methods: {
      onChange(e) {
        console.log(e.detail.value)
      }
    }
  }
</script>

自定义取值范围、步长

可以自定义 min max step 等。默认情况下，取值范围是 0 ~ 100，步长为 1。

<div style="width: 500px;">
  <se-slider show-value :value="value" :min="-10" :max="10" :step="0.2" @change="onChange" />
</div>
<script>
  export default {
    data() {
      return {
        value: 5
      }
    },
    mounted() {
      setTimeout(() => {
        this.value = -5.11
      }, 300)
    },
    methods: {
      onChange(e) {
        this.value = e.detail.value
      }
    }
  }
</script>

设置图标

利用slot可设置滑块两侧的图标

<se-slider :value="33" class="slider">
  <img
    class="prefix-icon"
    slot="prefix"
    src="https://s5.ssl.qhres.com/static/e74db12cb3fc85da.svg"
  />
  <img
    class="suffix-icon"
    slot="suffix"
    src="https://s4.ssl.qhres.com/static/3382b9e5e9df71cc.svg"
  />
</se-slider>

<style scoped>
  .slider {
    width: 500px;
  }
  .prefix-icon,
  .suffix-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
</style>

实时显示当前 value

利用 slot 可设置滑块右侧的内容

<se-slider :value="value" style="width: 500px" @change="onChange">
  <span slot="suffix">{{ value }}</span>
</se-slider>

<script>
  export default {
    data() {
      return {
        value: 12
      }
    },
    methods: {
      onChange(e) {
        this.value = e.detail.value
      }
    }
  }
</script>

设置滑块大小

取值范围为 12 - 28, 超出范围则按照边界值显示

<se-slider :value="36" :block-size="value" />

<se-slider :value="value" @change="onChange" class="slider">
  <div slot="prefix">滑块大小：</div>
  <div slot="suffix">{{ value }}</div>
</se-slider>

<script>
  export default {
    data() {
      return {
        value: 12
      }
    },
    methods: {
      onChange(e) {
        this.value = e.detail.value
      }
    }
  }
</script>
<style scoped>
  .slider {
    width: 500px;
    margin-top: 20px;
  }
</style>

三、间断滑块

间续滑块允许用户从一个范围中选择特定值。

交互说明

1.用户鼠标长按滑块，出现 tooltips 提示用户当前数值

2.用户在滑动过程中，只能选择特定的数值

3.松开鼠标，选择操作即完成

设置刻度

可以通过 marks 属性指定一个数组，其中每个值对应着一个刻度点。

<div style="width: 500px;">
  <se-slider :value="value" :min="1" :max="5" :marks="marks" @change="onChange" />
</div>

<script>
  export default {
    data() {
      return {
        value: 3,
        marks: [1, 2, 3, 4, 5]
      }
    },
    methods: {
      onChange(e) {
        this.value = e.detail.value
      }
    }
  }
</script>

可以通过属性 show-marks 控制刻度值的显示 ——

<se-slider
  style="width: 500px;"
  show-marks
  :value="value"
  :min="1"
  :max="5"
  :marks="marks"
  @change="onChange"
/>

<script>
  export default {
    data() {
      return {
        value: 3,
        marks: [1, 2, 3, 4, 5]
      }
    },
    methods: {
      onChange(e) {
        this.value = e.detail.value
      }
    }
  }
</script>

通过传入一个 formmater 函数，可设置 tooltip 和刻度值的单位。

<h5>给默认的 slider 加 formmater 函数</h5>
<se-slider style="width: 500px;" :value="50" :formmater="formmater" show-value />

<h5>给带marks的 slider 加 formmater 函数</h5>
<se-slider
  style="width: 500px;"
  show-value
  show-marks
  :value="value"
  :max="40"
  :marks="marks"
  :formmater="formmater"
  @change="onChange"
/>

<script>
  export default {
    data() {
      return {
        value: 26,
        marks: [0, 10, 20, 30, 40]
      }
    },
    methods: {
      formmater(num, type) {
        return type === 'tip' ? `温度：${num}°C` : `${num}°C`
      },
      onChange(e) {
        this.value = e.detail.value
      }
    }
  }
</script>

结合 disabled 控制刻度值的样式 ——

<se-button @click="disabled = !disabled">
  {{ `${disabled ? '启用' : '禁用'}` }}
</se-button>

<se-slider
  style="display: block; width: 500px; margin: 20px 0;"
  show-value
  show-marks
  :value="value"
  :min="-10"
  :max="40"
  :marks="marks"
  :disabled="disabled"
  :formmater="formmater"
  @change="onChange"
></se-slider>

<script>
  export default {
    data() {
      return {
        value: 26,
        marks: [-10, 0, 10, 20, 30, 40],
        disabled: false
      }
    },
    methods: {
      formmater(num, type) {
        return type === 'tip' ? `温度：${num}°C` : `${num}°C`
      },
      onChange(e) {
        this.value = e.detail.value
      }
    }
  }
</script>

垂直方向

使用 vertical 属性即可使用垂直方向模式，请注意务必设置 height 属性。

<se-slider
  vertical
  show-value
  show-marks
  height="400px"
  :value="value"
  :min="-10"
  :max="40"
  :marks="marks"
  :formmater="formmater"
  @change="onChange"
></se-slider>

<script>
  export default {
    data() {
      return {
        value: 5,
        marks: [-10, 0, 10, 20, 30, 40]
      }
    },
    methods: {
      formmater(num, type) {
        return type === 'tip' ? `温度：${num}°C` : `${num}°C`
      },
      onChange(e) {
        this.value = e.detail.value
      }
    }
  }
</script>

Slots

Props

Events