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

代码语言：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 {
	-webkit-appearance: none;
	appearance: none;
}
/* 
======
LABELS
======
*/
.c-rng::after,
.c-rng::before {
	color: var(--rng-label-c);
	font-size: var(--rng-label-fz);
	position: absolute;
	top: calc(var(--rng-h) + var(--rng-label-off));
	z-index: -1;
}
.c-rng[data-range-labels]::after {
	content: attr(max);
	right: 0;
}
.c-rng[data-range-labels]::before {
	content: attr(min);
}
/* 
======
OUTPUT
======
*/
.c-rng__output {
	--rng-output-bgc: #444;
	--rng-output-c: #EEE;
	--rng-output-p: 0.25rem 0 0 0;
	--rng-output-t: 0.25rem;
	--rng-output-w: 2rem;

	background-color: var(--rng-output-bgc);
	color: var(--rng-output-c);
	display: inline-block;
	font-family: sans-serif;
	font-size: 0.675rem;
	left: calc(1% * var(--rng-unit) - ((var(--rng-thumb-w) / 100) * var(--rng-unit)));
	padding: var(--rng-output-p);
	position: relative;
	text-align: center;
	top: var(--rng-output-t);
	width: var(--rng-output-w);
}
.c-rng__output::after {
	border-left: calc(var(--rng-output-w) / 2) solid transparent;
  border-right: calc(var(--rng-output-w) / 2) solid transparent;
	border-top: calc(var(--rng-output-w) / 3) solid var(--rng-output-bgc);
	content: "";
	height: 0; 
	left: 0;
	position: absolute;
	top: 100%;
	width: 0;
}
/* 
==============
OUTPUT WRAPPER
==============
*/
.c-rng--output,
.c-rng__multi {
	height: 4rem;
	margin-bottom: 1rem;
	position: relative;
}
.c-rng--output .c-rng,
.c-rng__multi .c-rng {
	bottom: 1rem;
	left: 0;
	margin: 0;
	position: absolute;
}
.c-rng--output .c-rng__output,
.c-rng__multi .c-rng__output {
	position: absolute;
	top: 0;
}
/* 
=====
MULTI
=====
*/
.c-rng__multi [data-range-type="lower"] {
	--rng-bgi: linear-gradient(to right, var(--rng-upper) var(--rng-percent), var(--rng-lower) var(--rng-percent), var(--rng-lower) var(--rng-percent-upper), var(--rng-upper) var(--rng-percent-upper));
}
.c-rng__multi [data-range-type="upper"] {
	background: none;
}

/* Modifiers */
.c-rng--grey {
	--rng-focus: #A0A0A0;
	--rng-lower: #B0B0B0;
	--rng-upper: #DEDEDE;
	--rng-h: 8px;
	--rng-thumb-bgc: #FFF;
	--rng-thumb-bxsh: 1px 2px 4px 1px rgba(0, 0, 0, .25);
}
.c-rng--pink {
	--rng-focus: #E6002A;
	--rng-lower: #FF91A6;
	--rng-upper: #FFE0E5;
	--rng-h: 4px;
	--rng-thumb-bdrs: 0.25rem;
	--rng-thumb-bgc: #FF2F56;
	--rng-thumb-h: 2rem;
	--rng-thumb-w: 1rem;
}
.c-rng--hue {
	--rng-value: 0;
	--rng-bgi: linear-gradient(to right, red, #ff8000, #ff0, #80ff00, lime, #00ff80, cyan, #007fff, blue, #7f00ff, #f0f, #ff0080, red);
	--rng-thumb-bgc: hsl(var(--rng-value), 100%, 50%);
	--rng-thumb-bxsh--focus: inset 0 0 0 0.125rem rgba(255, 255, 255, 0.8), 0 0 0 0.125rem hsl(var(--rng-value), 100%, 25%);
  --rng-thumb-bxsh: inset 0 0 0 0.125rem hsl(var(--rng-value), 100%, 30%);
}
.c-rng--icons {
	--ico-audio: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 32"><path d="M27.814 28.814c-0.384 0-0.768-0.146-1.061-0.439-0.586-0.586-0.586-1.535 0-2.121 2.739-2.739 4.247-6.38 4.247-10.253s-1.508-7.514-4.247-10.253c-0.586-0.586-0.586-1.536 0-2.121s1.536-0.586 2.121 0c3.305 3.305 5.126 7.7 5.126 12.374s-1.82 9.069-5.126 12.374c-0.293 0.293-0.677 0.439-1.061 0.439zM22.485 25.985c-0.384 0-0.768-0.146-1.061-0.439-0.586-0.586-0.586-1.535 0-2.121 4.094-4.094 4.094-10.755 0-14.849-0.586-0.586-0.586-1.536 0-2.121s1.536-0.586 2.121 0c2.55 2.55 3.954 5.94 3.954 9.546s-1.404 6.996-3.954 9.546c-0.293 0.293-0.677 0.439-1.061 0.439v0zM17.157 23.157c-0.384 0-0.768-0.146-1.061-0.439-0.586-0.586-0.586-1.535 0-2.121 2.534-2.534 2.534-6.658 0-9.192-0.586-0.586-0.586-1.536 0-2.121s1.535-0.586 2.121 0c3.704 3.704 3.704 9.731 0 13.435-0.293 0.293-0.677 0.439-1.061 0.439z"></path><path d="M13 30c-0.26 0-0.516-0.102-0.707-0.293l-7.707-7.707h-3.586c-0.552 0-1-0.448-1-1v-10c0-0.552 0.448-1 1-1h3.586l7.707-7.707c0.286-0.286 0.716-0.372 1.090-0.217s0.617 0.519 0.617 0.924v26c0 0.404-0.244 0.769-0.617 0.924-0.124 0.051-0.254 0.076-0.383 0.076z"></path></svg>');
	--ico-mute: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 32"><path d="M13 30c-0.26 0-0.516-0.102-0.707-0.293l-7.707-7.707h-3.586c-0.552 0-1-0.448-1-1v-10c0-0.552 0.448-1 1-1h3.586l7.707-7.707c0.286-0.286 0.716-0.372 1.090-0.217s0.617 0.519 0.617 0.924v26c0 0.404-0.244 0.769-0.617 0.924-0.124 0.051-0.254 0.076-0.383 0.076z"></path></svg>');
	align-items: center;
	display: flex;
	width: 100%;
.........完整代码请登录后点击上方下载按钮下载查看