实现一个带有不一样样式的滑块

普通的滑块：

如果要设置带有特别样式的滑块，如类似于这样的：

你可以设置滑块的透明度为0，样式用图片代替，滑动到某一段距离，展示另一张图片。
具体例子如下：
在微信小程序中实现：

	<view class="slider">
			<view class="img">
				<image :src="sliderSrc" mode="" style="width: 100%;height: 100%;"></image>
			</view>
			<slider step="25" min="0" max="100" :value="currentValue" color="#05271B" activeColor="#F7EAC7" block-size="28"
			 block-color="#F7EAC7" backgroundColor="#FFFFFF" @change="changeSlider" style="opacity:0;margin: 25rpx 36rpx;" />
	</view>
	//滑动方法：
		changeSlider: function(e) {
				console.log(e, 'e----e')
				let value = e.detail.value;
				if (value == 0) {
					this.sliderSrc = '/static/imgs/slider_first.png';
				} else if (value == 25) {
					this.sliderSrc = '/static/imgs/slider_second.png';
				} else if (value == 50) {
					this.sliderSrc = '/static/imgs/slider_three.png';
				} else if (value == 75) {
					this.sliderSrc = '/static/imgs/slider_fourth.png';
				} else if (value == 100) {
					this.sliderSrc = '/static/imgs/slider_five.png';
				}
			},

用html实现也是一样的，只不过滑块使用的是input标签，设置range类型：

  <input id="range" type="range" min="0" value="0" style="opacity: 0;" oninput="change()" />