input[range]的简单使用及样式修改

使用

最近项目上有个需求要做一个可以拖动的条，并且可以根据拖动的不同位置进行相应的操作，所以就找了找有没有什么html5可以直接用的东西，因此就找到了input[type=“range”]这个东西。东西是找到了，但是有一个问题，样式巨丑。。。 所以在此简单介绍下如何修改样式及一个做成的小demo

样式的修改

和其他不能设置直接设置的input组件一样，range的使用也是先把它默认的样式给他干掉，即在对应的css中先加上一句 -webkit-appearance: none 或者 appearance: none，然后再重写上你喜欢的样式就行了。

• ::-webkit-slider-thumb是用来调整range中间可拖动的滑动块样式的，所以appearance: none也需要在这个地方再加一遍

实例

因为本身不是什么有难度的东西，就不做多余的介绍了。部分需要说明的地方有加注释。
（注：因为用了jquery进行dom操作，所以在使用时请记得引用）

<style>
.lcmf-choseCharts {
	height: 20rem;
	width: 100%;
	/* 设置定位为相对定位
	不会改变当前元素的位置
	内部元素进行绝对定位是可以当前目标作为位置判定 */
	position: relative;
}
.operateGuide {
	width: 24rem;
	height: 10rem;
	position: absolute;
	left: 15rem;
	top: 2rem;
	color: rgb(14,14,14);
	font-size: 1.7rem;
}
/* range主体样式 */
.lcmf-range {
	-webkit-appearance: none;
	position: absolute;
	appearance: none;
	height: 0.5rem;
	/* outline设置为零防止点到空白区域时会出现边框影响美观性问题 */
	outline: 0;
	border: 0;
	/* 背景色设置为渐变色，有兼容性问题谨慎使用 */
	background: linear-gradient(to right,rgb(238,222,217),rgb(200,66,67));
	border-radius: 0 0.5rem 0.5rem 0;
}
/* 滑动块样式 */
.lcmf-range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	height: 2rem;
	width: 2rem;
	border-radius: 1.5rem;
	background-color: white;
	border: 0.15rem solid rgb(245,95,95);
}
#lcmf-range-type {
	width: 35rem;
	left: 9rem;
	bottom: 5rem;
}
#lcmf-range-date {
	/* 顺时针旋转90度作为y轴 */
	transform: rotate(90deg);
	width: 15rem;
	left: 1.25rem;
	bottom: 12.25rem;
	background: linear-gradient(to right,rgb(200,66,67),rgb(238,222,217));
}
.lcmf-date-text {
	position: absolute;
	height: 15rem;
	width: 8rem;
	text-align: center;
	bottom: 4.9rem;
	left: 0.5rem;
	font-size: 1.3rem;
	color: rgb(176,176,176);
}
.lcmf-date-text-child {
	height: 33%;
}
.lcmf-type-text {
	width: 35rem;
	position: absolute;
	/* 弹性布局，可使内部元素平均分配 */
	display: flex;
	left: 9rem;
	bottom: 1.5rem;
	font-size: 1.3rem;
	color: rgb(176,176,176);
}
.lcmf-type-text-child {
	width: 34%;
	text-align: center;
}
.activeType {
	/* 活跃态字色调整 */
	color: rgb(200,105,105);
}
</style>
<div class="lcmf-choseCharts">
	<p class="operateGuide">
		您只要上下拖动或左右拖动选择大致的范围，即可立即看到您预期的效果。
	</p>
	<input type="range" class="lcmf-range" id="lcmf-range-type" />
	<!-- 因为做的看起来像是坐标轴但其实还是分开的两个range
	所以谁在上谁在下需要注意一下
	根据html的特性 在下边的元素拥有更高的层级
	 -->
	<input type="range" class="lcmf-range" id="lcmf-range-date" />
	<div class="lcmf-date-text">
		<div class="lcmf-date-text-child">
			<p>长期</p>
			<p>1年以上</p>
		</div>
		<div class="lcmf-date-text-child activeType">
			<p>中期</p>
			<p>3个月-1年</p>
		</div>
		<div class="lcmf-date-text-child">
			<p>短期</p>
			<p>0-3个月</p>
		</div>
	</div>
	<div class="lcmf-type-text">
		<p class="lcmf-type-text-child">
			选择A
		</p>
		<p class="lcmf-type-text-child activeType">
			选择B
		</p>
		<p class="lcmf-type-text-child">
			选择C
		</p>
	</div>
	<p></p>
</div>

<script type="text/javascript">
	/* 和其他的input一样，range的动态传递什么的也是通过value进行的 */
	$('#lcmf-range-type').on('change',function(){
		var iptVal = $(this).val();
		changeChoseByRange(iptVal, 'type');
	})
	$('#lcmf-range-date').on('change',function(){
		var iptVal = $(this).val();
		changeChoseByRange(iptVal, 'date');
	})
	/* 因为两边用的方法其实内容多数是重复的
	   所以进行了简单的封装 */
	function changeChoseByRange(val, domStr){
		$('.lcmf-'+ domStr +'-text-child').removeClass('activeType');
		var domCld = '';
		if(val < 33 ){
			domCld = $('.lcmf-'+ domStr +'-text').children()[0];
		}else if(val > 67){
			domCld = $('.lcmf-'+ domStr +'-text').children()[2];
		}else {
			domCld = $('.lcmf-'+ domStr +'-text').children()[1];
		}
		/* 这里特别注明一下
		通过.children()方法取到子元素后其实已经是转化成js的原生dom元素了
		也就是说在这里其实不能通过jquery的addClass方法添加class了
		所以通过className的字符串拼接进行替换
		注意activeType前有空格，不可省略
		*/
		domCld.className += ' activeType';
	}
</script>

成果

结束

input[type=“range”]的使用介绍就这么些了，有帮助的小伙伴们请放心使用，无毒无害。