更新记录

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

提交发布

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.2 app-vue app-nvue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
√ √ √ √
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

插件预览地址

使用示例

<!-- 基础用法 -->
<sh-slider v-model="data" type="annular" />

<!-- 滑块配色 -->
<sh-slider
  v-model="data"
  type="annular"
  railColor="#a55eea"
  :sliderColor="['#1dd1a1', '#f368e0']"
  railHeight="20px"
  railRadius="12px"
  radius="20rpx" />

<sh-slider
  v-model="rangeData"
  type="annular"
  :sliderColor="['#1dd1a1', '#f368e0']"
  railHeight="20px"
  railRadius="12px"
  radius="20rpx" />

<sh-slider
  v-model="rangeData"
  type="annular"
  :railColor="['#a55eea', '#eb4d4b', '#fd9644']"
  :sliderColor="['#1dd1a1', '#f368e0']"
  railHeight="20px"
  railRadius="12px"
  radius="20rpx" />

<!-- 更多示例请下载右上角示例项目 -->

属性 Porps

属性 类型 默认值 说明
v-model Number, Array 传入单个数字为单滑块，传入数组为双滑块
min Number 0 最小值
max Number 0 最大值
step Number 1 步长必须为 (max - min) % step = 0
type String circle annular 圆环，circle 圆形
disabled Boolean false 禁用
silky Boolean false 丝滑模式，setp越大越平滑
height String auto 整体的滑块组件高度
railRadius String 0px 滑轨圆角
railHeight String 4px 滑轨高度
railColor String, Array #4b7bec 滑轨颜色, 传入数组时滑轨匹配多种颜色
sliderColor String, Array #4b7bec 滑块颜色, 传入数组时滑块匹配多种颜色
sliderWidth String 20px 滑块宽度
sliderHeight String 20px 滑块高度
sliderRadius String 20px 滑块圆角
sliderShadow String 滑块阴影

事件 Slot

插槽名 说明
left 左边滑块, 如v-model绑定为Number时该插槽无效，请使用 #right
right 右边滑块

事件 Emit

事件名 说明 回调参数
change 滑块变化 value

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。

插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...