更新记录

1.0.0（2024-07-11） 下载此版本

初次提交

平台兼容性

uni-app

其他

horizontal-slider

1. 概述

水平滑块组件是一个适用于uniapp和vue.js应用程序的可定制滑块，允许用户在指定范围内选择数值，并且体验到比较丝滑的滑动体验；

如果是微信小程序，我也提供了wx-horizontal-slder版本，该版本使用setInterval()替代windows.requestAnimationFrame(),使其能够在微信小程序中运行。

支持单点动画和拖拽动画；

2. 特性

• 可定制化: 调整滑块的宽度、高度、颜色和文本。
• 响应式: 支持移动设备和桌面端的触摸事件。
• 数值显示: 可选择显示当前滑块数值。
• 流畅动画: 使用 CSS 过渡实现流畅的视觉反馈。

3. props

• initialValue: 初始数值
• sliderWidth: 滑块宽度
• sliderHeight: 滑块高度
• sliderColor: 滑块颜色
• sliderText: 滑块文本
• textSize: 文本大小
• textColor: 文本颜色
• sliderBackgroundColor: 滑块背景颜色
• maxSliderValue: 最大数值
• minSliderValue: 最小数值
• stepSize: 步长
• showValue: 是否显示数值
• transitionDuration: 过渡动画时长

4. 使用示例

<template> <horizontal-slider :initialValue="50" sliderWidth="300px" sliderHeight="20px" sliderColor="#1890ff" sliderText="滑块" textSize="12" textColor="white" sliderBackgroundColor="#e0e0e0" :maxSliderValue="100" :minSliderValue="0" :stepSize="1" :showValue="true" /> </template>