SliderRange 双滑块范围选择器

llt3677

已于 2025-01-08 17:07:01 修改

阅读量1.2k

点赞数 22

文章标签： vue.js 前端

于 2024-12-26 16:28:06 首次发布

本文链接：https://blog.csdn.net/qq_15699785/article/details/144746913

版权

SliderRange 双滑块范围选择器

一个轻量级但功能强大的双滑块范围选择器组件，完美适配移动端和PC端，为您的项目提供直观的范围选择体验。

🌟 特性

✨ 灵活的范围设置 - 支持自定义最大最小值
📏 精确的步长控制 - 可设置数值变化的最小单位
🎨 丰富的样式定制 - 支持自定义滑块、轨道样式
📱 完美的跨端适配 - 支持H5/App/小程序多端使用
🔄 双向绑定支持 - 支持v-model语法
🎯 刻度线显示 - 直观的数值参考
⌨️ 键盘操作支持 - 提升无障碍体验
🚫 禁用状态 - 支持只读模式

📦 安装

下载使用

将 llt-slider-range 组件复制到你的项目中即可。

🚀 快速开始

H5/App使用示例

<template>
  <llt-slider-range v-model="rangeValue" />
</template>

<script>
export default {
  data() {
    return {
      rangeValue: [30, 50] // 设置初始范围值
    }
  }
}
</script>

微信小程序使用示例

<template>
  <llt-slider-range
    :model-value="rangeValue" 
    @change="handleChange"
  />
</template>

<script>
export default {
  data() {
    return {
      rangeValue: [30, 50]
    }
  },
  methods: {
    handleChange(val) {
      this.rangeValue = val
    }
  }
}
</script>

📝 API文档

Props 属性

属性名	类型	默认值	说明
modelValue/v-model	Array	[0, 100]	当前选中的范围值
min	Number	0	最小可选值
max	Number	100	最大可选值
step	Number	1	步长，必须大于0
disabled	Boolean	false	是否禁用
backgroundColor	String	‘#F6F6F6’	滑动条背景色
activeColor	String	‘#4DB8F6’	选中范围的颜色
blockSize	Number	48	滑块大小(rpx)
blockColor	String	‘#fff’	滑块颜色
format	Function	val => val	数值格式化函数

Events 事件

事件名	说明	回调参数
update:modelValue	值更新时触发	(value: number[])
change	值变化时触发	(value: number[])

💡 高级用法

价格范围选择器

<template>
  <llt-slider-range
    v-model="priceRange"
    :min="0"
    :max="10000"
    :step="100"
    :format="formatPrice"
    active-color="#FF6B6B"
  />
</template>

<script>
export default {
  data() {
    return {
      priceRange: [1000, 5000]
    }
  },
  methods: {
    formatPrice(val) {
      return `￥${val}`
    }
  }
}
</script>

温度选择器

<template>
  <llt-slider-range
    v-model="tempRange"
    :min="-20"
    :max="40"
    :format="val => `${val}°C`"
    active-color="#2196F3"
  />
</template>