<div class="range_type_class">
	<div class="range_type_class_txt">向右拖动滑块填充拼图</div>
	<input type="range" max="86" v-model="slider_value" @input="slider_change" />
		<div class="range_type_class_one" :style="{width:slider_value+'%'}">
			<div class="range_type_class_one_txt" v-show="slider_value>=70">
				已完成验证
			</div>
		</div>
	<div class="range_type_class_two" :style="{left:slider_value+'%'}">→</div>
</div>

data:{
    slider_value:0
}



methods: {
		slider_change(){
			console.log("触发",this.slider_value)
		}
}

.range_type_class {
	width: 298px;
	height: 42px;
	background: #F5F5F5;
	border: 1px solid #DDDDDD;
	border-radius: 0px 3px 3px 0px;
	margin-bottom: 20px;position: relative;overflow: hidden;
}
.range_type_class_txt{
	width: 100%;
	height: 42px;line-height: 42px;
	padding-left: 52px;
	position: absolute;left:0;top: 0;z-index: 66;
}
.range_type_class_two{
	width: 42px;
	height: 40px;line-height: 40px;text-align: center;cursor: pointer;
	border-radius: 0;
	background: #FFFFFF;
	position: absolute;top: 0;z-index: 88;
}
.range_type_class_one{
	height: 42px;
	background: #D01B1B;
	position: absolute;top: 0;z-index: 77;
}
.range_type_class_one_txt{
	width: 100%;height: 100%;
	line-height: 40px;
	padding-left: 42px;color: #FFFFFF;
}

/* 隐藏input */
.range_type_class>input {
	opacity: 0;cursor: pointer;
	width: 298px;
	height: 40px;
	position: absolute;left: 0;top: 0;z-index: 99;
}

input[type=range] {
	-webkit-appearance: none;
}

input[type=range]:focus {
	outline: none;
}

input[type=range]::-webkit-slider-thumb {
	/* 设置这里是因为在隐藏之前需要看到 */
	-webkit-appearance: none;
	margin-top: -1px;
	width: 42px;
	height: 40px;
	background: red;
	border-radius: 0;
}