# slider-range
## 区间滑动选择

### 属性说明
| 属性名 | 类型 | 默认值 | 说明
|- | - |- | - |
| value |Number/Array<Number>[2]|[]|初始值，为 number 时表示滑动选择器，为 array 时表示区间滑动选择器|
| valueType | String | max | 当 value 为 number 时，可滑动的是哪个值，可选值：min、max，默认 max |
| min | Number | 0 | 最小值（最左侧值）默认 0 |
| max | Number | 100 | 最大值（最右侧值）默认 100 |
| step | Number | 1 | 步长，为 0 时不设步长，默认为 1，支持步长为浮点数，不设步长时返回两位浮点数，想要获取几位浮点数就把步长设置为几位浮点数 |
| height | Number/String | 12 | 滑动条高度，可自定义单位，默认单位 rpx |
| disabled | Boolean | false | 是否禁用 |
| tips | Boolean | true | 是否显示滑动提示 |
| scale | Boolean/Object | true | 刻度条配置，为 boolean 时表示是否显示，为 object 时见下方刻度条配置说明 |
| backgroundStyle | Object | {} | 背景条自定义样式 |
| activeStyle | Object | {} | 选中条自定义样式 |

### 刻度条配置说明
| 属性名 | 类型 | 默认值 | 说明 |
|- | - |- | - |
|show | Boolean | true | 是否显示 |
|min | Boolean | true | 是否显示最小刻度 |
|max | Boolean | true | 是否显示最大刻度 |
|interval | Number | auto | 刻度间隔，即间隔几个步长，不设步长时默认为 1，默认自动计算间隔，显示 10 个左右的刻度 |
|color | String | #333333 | 刻度值颜色 |
|tickColor | String | #999999 | 刻度线颜色 |
|fontSize | Number/String | 22 | 刻度值字体大小 |
|format | Function | null | 格式化函数，可以通过此函数来设置具体某一个刻度的显示内容和样式 |

### 回调方法
| 方法名 | 说明 | 返回值 |
|- |- |- |
| change | 滑动时触发 | firstValue: 第一个滑点的值，一般只在小程序使用firstTips插槽时才有用, secondValue，第一个滑点的值，一般只在小程序使用secondValue插槽时才有用，values: 选择区间，数组形式，第一个值为较小值，第二个值为较大值 |
| start | 按住滑动块时触发 | block: 按住的滑动块, value: 按住滑动块的当前值, values: 同上 |
| end | 松开滑动块时触发 | block: 按住的滑动块, value: 按住滑动块的当前值, values: 同上 |

### 使用示例
```
<slider-range
	:scale="{
		show: true,
		format: scaleFormat
	}"
	@change="changeSliderValue">
</slider-range>
```
```
import SliderRange from '@/components/tianzai-slider-range'
export default {
	components:{
		SliderRange
	},
	methods: {
		changeSliderValue(e){
			console.log(e)
		},
		scaleFormat(val, index){
			if(index % 2 != 0){
				return {...val, label: '自定义设置', fontSize: '48rpx'}
			}
			return val
		}
	}
}
```

### 插槽（微信不支持同名插槽多次渲染，需要不同的写法兼容）
```
// 自定义滑动块
<slider-range>
	<!-- #ifndef MP-WEIXIN -->
 	<template #block>
 		<image
 			class="block-image"
 			src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788">
 		</image>
 	</template>
 	<!-- #endif -->
 	<!-- #ifdef MP-WEIXIN -->
 	<template #firstBlock>
 		<image
 			class="block-image"
 			src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788">
 		</image>
 	</template>
 	<template #secondBlock>
 		<image
 			class="block-image"
 			src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788">
 		</image>
 	</template>
	<!-- 这个是用来撑起元素高度的，不传这个滑动条不会自动撑起高度 -->
 	<template #placeholderBlock>
 		<image
 			class="block-image"
 			src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788">
 		</image>
 	</template>
 	<!-- #endif -->
</slider-range>

```
```
// 自定义滑动提示
<slider-range>
 	<!-- #ifndef MP-WEIXIN -->
 	<template #tips="{ value }">
 		<view class="dark-mode">{{ value }}</view>
 	</template>
 	<!-- #endif -->
 	<!-- #ifdef MP-WEIXIN -->
	<!-- 微信小程序不能使用插槽传值，可以在 change 方法里获取到后显示出来对应的值 -->
 	<template v-slot:firstTips>
 		<view class="dark-mode">{{ firstValue }}</view>
 	</template>
 	<template v-slot:secondTips>
 		<view class="dark-mode">{{ secondValue }}</view>
 	</template>
 	<!-- #endif -->
</slider-range>
```

### 其他注意点
- 组件所有属性并非绑定且没有watch监听，只用于组件渲染时的初始设置，可以在 value、min、max、step 等属性发生变化时调用组件的 create 方法来使其生效，否则可能造成组件显示错乱。
```
<slider-range :max="max || 100" ref="mySliderRange"></slider-range>
this.max = 10
this.$nextTick(() => {
	this.$refs.mySliderRange.create()
})
```
- format 在函数中改变 fontSize 时不再自动补全单位(不能只写数字)，需设置时填写完全。
- 关于微信的多个同名插槽问题，官方的 issues 上说在解决中，如果哪天解决了可以在评论区提醒我来优化 [github issues](https://github.com/dcloudio/uni-app/issues/3503)
- 关于微信小程序插槽无法传值问题，HBuilderx 官方说解决了，但是我在编写过程中还是无法使用，如果有人会写，麻烦在评论区告知 [github issues](https://github.com/dcloudio/uni-app/issues/495)