范围滑块

下载代码

html

css

分享到微信朋友圈

html

css

@import url('https://fonts.googleapis.com/css?family=Lato');

* {
	box-sizing: border-box;
}

body {
	background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

min-height: 100vh;
	font-family: 'Lato', sans-serif;
	margin: 0;
}

h2 {
	position: absolute;
	top: 10px;
}

.range-container {
	position: relative;
}

input[type=range] {
	width: 300px;
  	margin: 18px 0;
  	-webkit-appearance: none;
}

input[type=range] + label {
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	padding: 5px 0;
	position: absolute;
	top: -25px;
	left: 110px;
	text-align: center;
	width: 80px;
}

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

input[type=range]::-webkit-slider-runnable-track {
	animate: 0.2s;
	background-color: purple;
	border-radius: 4px;
	cursor: pointer;
	width: 100%;
	height: 7.5px;
}

input[type=range]::-webkit-slider-thumb {
	background: #ffffff;
	border-radius: 50%;
	border: 1px solid purple;
  	cursor: pointer;
	height: 20px;
	width: 20px;
	margin-top: -7px;
	-webkit-appearance: none;
}

input[type=range]:active::-webkit-slider-runnable-track {
	opacity: 0.8;
}
input[type=range]::-moz-range-track {
	animate: 0.2s;
	background-color: purple;
	border-radius: 4px;
	cursor: pointer;
	width: 100%;
	height: 7.5px;
}
input[type=range]::-moz-range-thumb {
	background: #ffffff;
	border-radius: 50%;
	border: 1px solid purple;
  	cursor: pointer;
	height: 20px;
	width: 20px;
}
input[type=range]::-ms-track {
	animate: 0.2s;
	background-color: purple;
	border-radius: 4px;
	cursor: pointer;
	width: 100%;
	height: 7.5px;
}
input[type=range]::-ms-thumb {
	background: #ffffff;
	border-radius: 50%;
	border: 1px solid purple;
  	cursor: pointer;
	height: 20px;
	width: 20px;
	margin: 0;
	box-sizing: border-box;
}

input[type=range]:active::-ms-fill-lower {
  background: purple;
}

input[type=range]:active::-ms-fill-upper {
  background: purple;
}

JavaScript

const range = document.getElementById('range');

range.addEventListener('input', (e) => {
	// Get the label (which is the nextElementSibling)
	const label = e.target.nextElementSibling;
	// Get value of the input
	const value = +e.target.value;
	// Get the width value of the input
	const range_width = getComputedStyle(e.target).getPropertyValue('width');
	// Get the width value of the label
	const label_width = getComputedStyle(label).getPropertyValue('width');
	// Remove 'px' and conver to number
	const num_width = +range_width.substring(0, range_width.length - 2);
	const num_label_width = +label_width.substring(0, label_width.length - 2);
	// Get min and max values
	const max = +e.target.max;
	const min = +e.target.min;
	// Calculate the left value
	const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10);
	
	label.style.left = `${left}px`;
	label.innerHTML = value;
});

const scale = (num, in_min, in_max, out_min, out_max) => {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg