闪光滑动器
简单的 svelte 范围滑动组件 . 演示
安装
安装 npm 或 纱线 :
npm i -D @bulatdashiev/svelte-slider
然后导入 Slider svelte 应用程序的组件.
import Slider from '@bulatdashiev/svelte-slider';
使用量
简单使用
<Slider bind:value >
范围输入
<Slider bind:value range />
最小、最大和步数
<Slider min="-50" max="50" step="10" bind:value range />
你们可以 bind 到分、最大和值,滑动会根据道具的改变而改变
槽数
默认槽
<Slider bind:value>
<span style="font-size: 20px;">👏</span>
</Slider>
左,右档
<Slider bind:value range>
<span slot="left" style="font-size: 20px;">👎</span>
<span slot="right" style="font-size: 20px;">👍</span>
</Slider>
道具
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 价值 | 阵列 [数, 数] | [min, max] | |
| 分钟 | 编号 | 0 | |
| 最大数 | 编号 | 100 | |
| 步骤 | 编号 | 1 | |
| 名称 | 矩阵 [字符串,字符串] | 空阵列 | 如果您想要在窗体输入中使用滑动器, 请为输入提供名称 |
| 范围 | 布尔 | false | 设定为 true 要使用区域输入 |
| 顺序 | 布尔 | false | 设定为 true 如果您想要值 [0] 总是更大的, 那么值 [1] |
槽数
default- 如果left或者说right未提供插槽left- 提供自定义左拇指right- 自定义右拇指
活动
input- 当拇指拖动内值变化时事件起火
样式
:root {
--track-bg: #ebebeb;
--progress-bg: #8abdff;
--thumb-bg: #5784fd;
}
设定 --thumb-bg 改为 transparent 如果您使用自定义缩写
:root {
--thumb-bg: transparent;
}
许可证
麻省理工学院