Slider (滑动输入条)

概述

Slider 是一个滑动输入组件，允许用户通过拖动滑块选择一个范围内的数值。该组件支持自定义样式、步长、最小值、最大值等多种配置，适用于数值选择、音量调节等场景。

---

预览

Slider 组件示例

基本使用

当前值: 50

自定义样式

当前值: 25

禁用状态

禁用状态下的值: 5

基本使用

通过简单配置实现滑动条功能

<template>
  <div class="slider-demo">
    <h1>Slider 组件示例</h1>

    <section>
      <h2>基本使用</h2>
      <se-slider
        v-model:value="basicValue"
        :min="0"
        :max="100"
        :step="5"
        @change="onChange"
      />
      <p>当前值: {{ basicValue }}</p>
    </section>

    <section>
      <h2>自定义样式</h2>
      <se-slider
        v-model:value="customStyleValue"
        :min="0"
        :max="50"
        :step="2"
        type="primary"
        @input="onInput"
      />
      <p>当前值: {{ customStyleValue }}</p>
    </section>

    <section>
      <h2>禁用状态</h2>
      <se-slider
        v-model:value="disabledValue"
        :min="0"
        :max="10"
        :step="1"
        :disabled="true"
      />
      <p>禁用状态下的值: {{ disabledValue }}</p>
    </section>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "SliderDemo",
  setup() {
    const basicValue = ref(50);
    const customStyleValue = ref(25);
    const disabledValue = ref(5);

    const onChange = (value: number) => {
      console.log("Slider 值变化完成:", value);
    };

    const onInput = (value: number) => {
      console.log("实时值更新:", value);
    };

    return {
      basicValue,
      customStyleValue,
      disabledValue,
      onChange,
      onInput,
    };
  },
});
</script>

<style scoped>
.slider-demo {
  padding: 20px;
}

.slider-demo section {
  margin-bottom: 30px;
}

.slider-demo h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.slider-demo p {
  margin-top: 5px;
  color: #555;
}
</style>

---

基础配置

使用方式

1. 在模板中使用

<se-slider 
  v-model:value="value" 
  :min="0" 
  :max="100" 
  :step="5" 
  type="primary" 
  @change="onChange" 
/>

3. 绑定的值会实时更新

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(50);
    const onChange = (val: number) => {
      console.log('滑块当前值:', val);
    };
    return { value, onChange };
  },
};

---

参数

参数名	类型	默认值	描述	跳转 Demo
value	number	0	滑块当前值，支持双向绑定。	基本使用
min	number	0	滑块的最小值。	最小/最大值
max	number	100	滑块的最大值。	最小/最大值
step	number	1	滑块的步长，必须为正数，且能被 (max - min) 整除。	步长
disabled	boolean	false	是否禁用滑块。	禁用状态
type	string	""	滑块样式类型，可自定义样式风格，例如 primary、success、warning 等。	样式类型

---

事件

事件名	参数类型	描述	跳转 Demo
@input	value: number	滑块值变化时触发，用于实时监听值。	实时监听
@change	value: number	滑块值改变后触发（鼠标释放时触发），适合确认型操作。	确认事件

---

样式自定义

类名说明

类名	描述
.se-Slider	滑块组件容器
.se-Slider__track	滑块轨道容器
.se-Slider__progress	滑块已选中的轨道
.se-Slider__handle	滑块的可拖动圆点
.se-Slider--{type}	根据 type 添加的自定义样式类名

---

示例: 自定义样式

.se-Slider--primary {
  .se-Slider__progress {
    background-color: #1890ff;
  }
  .se-Slider__handle {
    border-color: #1890ff;
  }
}

其他说明

1. 响应式支持
   滑块通过 v-model 实现双向绑定，可与 Vue 的响应式系统无缝结合。

2. 无障碍设计
   组件设计中充分考虑无障碍支持，键盘用户可通过 Tab 键选择滑块，并通过方向键调整值。

3. 浏览器兼容性
   该组件支持现代浏览器，包括 Chrome、Edge、Firefox 和 Safari。