更新记录

1.0.1（2026-03-30） 下载此版本

Slider 滑块组件，仿ELementUI-Slider 组件，适配微信小程序，h5，安卓app

平台兼容性

uni-app(5.05)

ElSlider 滑块组件

组件简介

ElSlider 是一个功能丰富的滑块组件，支持单值和范围选择、水平/垂直布局、输入框联动、刻度标记、工具提示等特性。

适用于数值区间选择、进度控制等场景。

基础用法

<template>
  <el-slider v-model="value" :min="0" :max="100" />
</template>

<script>
export default {
  data() {
    return {
      value: 30,
    };
  },
};
</script>

属性（Props）

marks 配置示例

marks: {
  0: '起点',
  25: '1/4',
  50: '中点',
  75: '3/4',
  100: {
    label: '终点',
    style: {
      color: '#f00',
      fontWeight: 'bold'
    }
  }
}

事件（Events）

方法（Methods）

无

插槽（Slots）

无

样式自定义

.slider-track .slider-range,
.slider-track .slider-bar {
  background-color: #ff6600;
}

.slider-thumb {
  background-color: #ff6600;
}

注意事项

• range 为 true 时，value 必须为数组，例如 [20, 60]
• vertical 模式必须设置 height
• 设置 marks 后，showStops 失效
• 输入框仅在单值模式生效
• tooltip 默认拖拽时显示
• 组件会自动响应窗口变化

完整示例

<template>
  <view class="demo">
    <el-slider v-model="value1" :min="0" :max="100" />

    <el-slider
      v-model="value2"
      :min="0"
      :max="100"
      range
      :marks="marks"
      show-stops
    />

    <el-slider
      v-model="value3"
      vertical
      height="300rpx"
      show-input
      :format-tooltip="(val) => `${val}%`"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      value1: 30,
      value2: [20, 60],
      value3: 50,
      marks: {
        0: "0",
        25: "25",
        50: "50",
        75: "75",
        100: "100",
      },
    };
  },
};
</script>

更新日志

• 初始版本，提供完整滑块功能