range输入框默认样式的修改

修改滑块方向为垂直的，默认是水平的

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

修改样式

input[type=range] {
	margin-top: 3px;
	outline: none;
	-webkit-appearance: none;
	/*清除系统默认样式*/
	width: 100% !important;
	background: -webkit-linear-gradient(#368, #368) no-repeat, #ddd;
	background-size: 30% 100%;
	/*设置左右宽度比例*/
	height: 3px;
	/*横条的高度*/
}

        /*拖动块的样式*/
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	/*清除系统默认样式*/
	height: 16px;
	/*拖动块高度*/
	width: 16px;
	/*拖动块宽度*/
	background: #fff;
	/*拖动块背景*/
	border-radius: 50%;
	/*外观设置为圆形*/
	border: solid 1px #ddd;
	/*设置边框*/
}

修改 range 为垂直的

CSS 提供了一个属性 appearance: slider-vertical;，可以将 range 修改为垂直的，但是这个属性不好用，而且已经被废弃了，所以我们可以使用 transform 属性来实现

input[type=range]{
	transform: rotate(-90deg);
}

滑块激活部分高亮需要使用 js 监听 oninput 事件，动态的修改 background-size 来实现