css+js实现多种不同风格的滑动取值器效果代码-html代码-BFW代码库

css+js实现多种不同风格的滑动取值器效果代码

代码语言：html

代码描述：css+js实现多种不同风格的滑动取值器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
.c-rng {
	--rng-focus: #064374;
	--rng-lower: #6495ED;
	--rng-upper: #CFD8DC;
	--rng-percent: 0%;
	--rng-percent-upper: 80%;
	
	--rng-bdrs: .375rem;
	--rng-bgi: linear-gradient(to right, var(--rng-lower) var(--rng-percent), var(--rng-upper) var(--rng-percent));
	--rng-h: 0.75rem;
	--rng-m: 2rem 0;
	--rng-w: 100%;
	
	--rng-label-c: #333;
	--rng-label-fz: 0.75rem;
	--rng-label-off: 0.25rem;
				
	--rng-thumb-bdrs: 50%;
	--rng-thumb-bxsh: none;
	--rng-thumb-bxsh--focus: inset 0 0 0 0.25rem var(--rng-focus);
	--rng-thumb-bgc: #0960A5;
	--rng-thumb-h: 2rem;
	--rng-thumb-w: 2rem;
	--rng-thumb-z: 1;
	
	background-image: var(--rng-bgi);
	border-radius: var(--rng-bdrs);
	box-sizing: border-box;
	font-family: inherit;
	height: var(--rng-h);
	margin: var(--rng-m);
	outline: none;
	position: relative;
	width: var(--rng-w);
}
/* 
=====
THUMB
=====
*/
.c-rng::-moz-range-thumb {
	background-color: var(--rng-thumb-bgc);
	border-radius: var(--rng-thumb-bdrs);
	box-shadow: var(--rng-thumb-bxsh);
	color: #000;
	cursor: ew-resize;
  height: var(--rng-thumb-h);  
	margin-top: calc(0px - ((var(--rng-thumb-h) - var(--rng-h)) / 2));
	position: relative;
	width: var(--rng-thumb-w);
	z-index: var(--rng-thumb-z);
}
.c-rng::-webkit-slider-thumb {
	background-color: var(--rng-thumb-bgc);
	border-radius: var(--rng-thumb-bdrs);
	box-shadow: var(--rng-thumb-bxsh);
	cursor: ew-resize;
  height: var(--rng-thumb-h);  
	margin-top: calc(0px - ((var(--rng-thumb-h) - var(--rng-h)) / 2));
	position: relative;
	width: var(--rng-thumb-w);
	z-index: var(--rng-thumb-z);
}
.c-rng:focus::-webkit-slider-thumb {
	box-shadow: var(--rng-thumb-bxsh--focus);
}
/* 
=====
TRACK
=====
*/
.c-rng::-moz-range-track {
	background: transparent;
	background-size: 100%;
	border-radius: var(--rng-bdrs);
	box-sizing: border-box;
	height: var(--rng-h);
}
.c-rng::-webkit-slider-runnable-track {
	background: transparent;
	background-size: 100%;
	border-radius: var(--rng-bdrs);
	box-sizing: border-box;
	height: var(--rng-h);
}
.c-rng,
.c-rng::-webkit-slider-runnable-track,
.c-rng::-webkit-slider-thumb {
	-webk.........完整代码请登录后点击上方下载按钮下载查看