# lime-slider 滑动输入条
- 滑动型输入器，展示当前值和可选范围、区间、档位。兼容uniapp/uniappx
- 插件依赖`lime-shared`、`lime-style`，不喜勿下

## 安装
在插件市场导入即可，首次导入可能需要重新编译

## 代码演示
### 基础使用

```html
<l-slider v-model="value" @change="onChange" />
```
```js
const value = ref(50);
const onChange = (value: number) => {
	console.log('当前值：' + value)
};
```


### 双滑块
添加 `range` 属性就可以开启双滑块模式，确保 `value` 的值是一个数组。
```html
<van-slider v-model="value" :range="true" @change="onChange" />
```
```js
// 双滑块模式时，值必须是数组
const value = ref([10, 50]);
const onChange = (value: number[]) => {
	console.log('当前值：' + value)
};
```


### 指定范围
通过设置 `min` 属性和`max`达到指定范围。
```html
<l-slider v-model="value" :min="-50" :max="50"/>
```

### 禁用
通过设置 `disabled`属性禁用。
```html
<l-slider v-model="value4" :disabled="true" />
```

### 指定步长
通过设置 `step` 属性值指定步长。
```html
<l-slider v-model="value" :step="10" />
```

### 自定义样式
通过 `thumb-size` 属性设置按钮尺寸，通过`rail-size`设置进度条高度，通过`track-color`可设置进度条激活态颜色。
```html
<l-slider v-model="value" thumb-size="30px" rail-size="4px" track-color="#34c471" />
```

### 自定义按钮
通过 `start-thumb` 插槽自定义按钮。
```html
<l-slider v-model="value" rail-size="4px" track-color="#ffb400">
	<template #start-thumb>
		<text class="custom-thumb">{{ value }}</text>
	</template>
</l-slider>
```

### 垂直方向
设置 `vertical` 属性后，滑块会垂直展示，且高度为 100% 父元素高度。
```html
<l-slider v-model="value" :range="true" :vertical="true"/>
```



### 插件标签
- 默认 l-slider 为 component
- 默认 lime-slider 为 demo
- 
### 关于vue2的使用方式
- 插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
- 关键代码是: 在main.js中 在vue2部分加上这一段即可.

```js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```


## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 当前分值 | _number_ | - |
| value | 当前分值 | _number_ | - |
| max | 最大值 | _number_ | `100` |
| min | 最小值 | _number_ | `0` |
| step | 步长 | _number_ | `0` |
| step | 步长 | _number_ | `1` |
| vertical | 是否垂直展示 | _boolean_ | `false` |
| disabled | 是否禁用滑块 | _boolean_ | `false` |
| range | 是否开启双滑块模式 | _boolean_ | `false` |
| thumbSize | 滑块按钮大小 | _string_ | `-` |
| thumbColor | 滑块按钮颜色 | _string_ | `-` |
| thumbBorderColor | 滑块按钮描边颜色 | _string_ | `-` |
| thumbRadius | 滑块按钮圆角 | _string_ | `-` |
| railColor | 进度条轨道颜色 | _string_ | `-` |
| railRadius | 进度条轨道圆角 | _string_ | `-` |
| railSize | 进度条轨道尺寸 | _string_ | `-` |
| trackColor | 进度条激活态颜色 | _string_ | `-` |



### Events

| 事件名 | 说明                     | 回调参数               |
| ------ | ------------------------ | ---------------------- |
| change | 当前分值变化时触发的事件 | _currentValue: number\|number[]_ |

#### Slots

| 名称 | 说明                                                       |
| ---- | ---------------------------------------------------------- |
| start-thumb   | 左边插槽 |
| end-thumb   | 右边插槽 |


## 主题定制

### 样式变量

组件提供了下列 CSS 变量，可用于自定义样式)。uvue app无效。

| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --l-slider-rail-size: | _20px_ | - |
| --l-slider-rail-color: | _$fill-2_ | - |
| --l-slider-rail-color: | _99px_ | - |
| --l-slider-track-color: | _$primary-color_ | - |
| --l-slider-thumb-size: | _12px_ | - |
| --l-slider-thumb-color: | _white_ | - |
| --l-slider-thumb-radius: | _99px_ | - |
| --l-slider-thumb-border-color: | _$gray-1_ | - |


## 打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。  
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png)
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png)