CSS Fader Case Study

In this example below you will see how to do a CSS Fader Case Study with some HTML / CSS and Javascript

The trigger element of fader knob has the highest z-index and opacity:0. For each bar, 50 divs are used with data-perc attribute having values from 0% to 100% with a difference of two so that when you hover on the particular part of the bar, the :before pseudo elements takes the value from data-perc attribute and displays it.

Thumbnail
This awesome code was written by pvonwedel, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pvonwedel ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Fader Case Study</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="mainwrapper">
<div class="faderwrapper">
<div class="fader">
	<div class="scale" data-perc="100"></div>
	<div class="scale" data-perc="98"></div>
	<div class="scale" data-perc="96"></div>
	<div class="scale" data-perc="94"></div>
	<div class="scale" data-perc="92"></div>
	<div class="scale" data-perc="90"></div>
	<div class="scale" data-perc="88"></div>
	<div class="scale" data-perc="86"></div>
	<div class="scale" data-perc="84"></div>
	<div class="scale" data-perc="82"></div>
	<div class="scale" data-perc="80"></div>
	<div class="scale" data-perc="78"></div>
	<div class="scale" data-perc="76"></div>
	<div class="scale" data-perc="74"></div>
	<div class="scale" data-perc="72"></div>
	<div class="scale" data-perc="70"></div>
	<div class="scale" data-perc="68"></div>
	<div class="scale" data-perc="66"></div>
	<div class="scale" data-perc="64"></div>
	<div class="scale" data-perc="62"></div>
	<div class="scale" data-perc="60"></div>
	<div class="scale" data-perc="58"></div>
	<div class="scale" data-perc="56"></div>
	<div class="scale" data-perc="54"></div>
	<div class="scale" data-perc="52"></div>
	<div class="scale" data-perc="50"></div>
	<div class="scale" data-perc="48"></div>
	<div class="scale" data-perc="46"></div>
	<div class="scale" data-perc="44"></div>
	<div class="scale" data-perc="42"></div>
	<div class="scale" data-perc="40"></div>
	<div class="scale" data-perc="38"></div>
	<div class="scale" data-perc="36"></div>
	<div class="scale" data-perc="34"></div>
	<div class="scale" data-perc="32"></div>
	<div class="scale" data-perc="30"></div>
	<div class="scale" data-perc="28"></div>
	<div class="scale" data-perc="26"></div>
	<div class="scale" data-perc="24"></div>
	<div class="scale" data-perc="22"></div>
	<div class="scale" data-perc="20"></div>
	<div class="scale" data-perc="18"></div>
	<div class="scale" data-perc="16"></div>
	<div class="scale" data-perc="14"></div>
	<div class="scale" data-perc="12"></div>
	<div class="scale" data-perc="10"></div>
	<div class="scale" data-perc="8"></div>
	<div class="scale" data-perc="6"></div>
	<div class="scale" data-perc="4"></div>
	<div class="scale" data-perc="2"></div>
	<div class="scale" data-perc="0"></div>
	<div class="knob"></div>
	<div class="scalelabel"></div>
</div>
</div>
<div class="faderwrapper">
<div class="fader">
	<div class="scale" data-perc="100"></div>
	<div class="scale" data-perc="98"></div>
	<div class="scale" data-perc="96"></div>
	<div class="scale" data-perc="94"></div>
	<div class="scale" data-perc="92"></div>
	<div class="scale" data-perc="90"></div>
	<div class="scale" data-perc="88"></div>
	<div class="scale" data-perc="86"></div>
	<div class="scale" data-perc="84"></div>
	<div class="scale" data-perc="82"></div>
	<div class="scale" data-perc="80"></div>
	<div class="scale" data-perc="78"></div>
	<div class="scale" data-perc="76"></div>
	<div class="scale" data-perc="74"></div>
	<div class="scale" data-perc="72"></div>
	<div class="scale" data-perc="70"></div>
	<div class="scale" data-perc="68"></div>
	<div class="scale" data-perc="66"></div>
	<div class="scale" data-perc="64"></div>
	<div class="scale" data-perc="62"></div>
	<div class="scale" data-perc="60"></div>
	<div class="scale" data-perc="58"></div>
	<div class="scale" data-perc="56"></div>
	<div class="scale" data-perc="54"></div>
	<div class="scale" data-perc="52"></div>
	<div class="scale" data-perc="50"></div>
	<div class="scale" data-perc="48"></div>
	<div class="scale" data-perc="46"></div>
	<div class="scale" data-perc="44"></div>
	<div class="scale" data-perc="42"></div>
	<div class="scale" data-perc="40"></div>
	<div class="scale" data-perc="38"></div>
	<div class="scale" data-perc="36"></div>
	<div class="scale" data-perc="34"></div>
	<div class="scale" data-perc="32"></div>
	<div class="scale" data-perc="30"></div>
	<div class="scale" data-perc="28"></div>
	<div class="scale" data-perc="26"></div>
	<div class="scale" data-perc="24"></div>
	<div class="scale" data-perc="22"></div>
	<div class="scale" data-perc="20"></div>
	<div class="scale" data-perc="18"></div>
	<div class="scale" data-perc="16"></div>
	<div class="scale" data-perc="14"></div>
	<div class="scale" data-perc="12"></div>
	<div class="scale" data-perc="10"></div>
	<div class="scale" data-perc="8"></div>
	<div class="scale" data-perc="6"></div>
	<div class="scale" data-perc="4"></div>
	<div class="scale" data-perc="2"></div>
	<div class="scale" data-perc="0"></div>
	<div class="knob"></div>
	<div class="scalelabel"></div>
</div>
</div>
<div class="faderwrapper">
<div class="fader">
	<div class="scale" data-perc="100"></div>
	<div class="scale" data-perc="98"></div>
	<div class="scale" data-perc="96"></div>
	<div class="scale" data-perc="94"></div>
	<div class="scale" data-perc="92"></div>
	<div class="scale" data-perc="90"></div>
	<div class="scale" data-perc="88"></div>
	<div class="scale" data-perc="86"></div>
	<div class="scale" data-perc="84"></div>
	<div class="scale" data-perc="82"></div>
	<div class="scale" data-perc="80"></div>
	<div class="scale" data-perc="78"></div>
	<div class="scale" data-perc="76"></div>
	<div class="scale" data-perc="74"></div>
	<div class="scale" data-perc="72"></div>
	<div class="scale" data-perc="70"></div>
	<div class="scale" data-perc="68"></div>
	<div class="scale" data-perc="66"></div>
	<div class="scale" data-perc="64"></div>
	<div class="scale" data-perc="62"></div>
	<div class="scale" data-perc="60"></div>
	<div class="scale" data-perc="58"></div>
	<div class="scale" data-perc="56"></div>
	<div class="scale" data-perc="54"></div>
	<div class="scale" data-perc="52"></div>
	<div class="scale" data-perc="50"></div>
	<div class="scale" data-perc="48"></div>
	<div class="scale" data-perc="46"></div>
	<div class="scale" data-perc="44"></div>
	<div class="scale" data-perc="42"></div>
	<div class="scale" data-perc="40"></div>
	<div class="scale" data-perc="38"></div>
	<div class="scale" data-perc="36"></div>
	<div class="scale" data-perc="34"></div>
	<div class="scale" data-perc="32"></div>
	<div class="scale" data-perc="30"></div>
	<div class="scale" data-perc="28"></div>
	<div class="scale" data-perc="26"></div>
	<div class="scale" data-perc="24"></div>
	<div class="scale" data-perc="22"></div>
	<div class="scale" data-perc="20"></div>
	<div class="scale" data-perc="18"></div>
	<div class="scale" data-perc="16"></div>
	<div class="scale" data-perc="14"></div>
	<div class="scale" data-perc="12"></div>
	<div class="scale" data-perc="10"></div>
	<div class="scale" data-perc="8"></div>
	<div class="scale" data-perc="6"></div>
	<div class="scale" data-perc="4"></div>
	<div class="scale" data-perc="2"></div>
	<div class="scale" data-perc="0"></div>
	<div class="knob"></div>
	<div class="scalelabel"></div>
</div>
</div>
<div class="faderwrapper">
<div class="fader">
	<div class="scale" data-perc="100"></div>
	<div class="scale" data-perc="98"></div>
	<div class="scale" data-perc="96"></div>
	<div class="scale" data-perc="94"></div>
	<div class="scale" data-perc="92"></div>
	<div class="scale" data-perc="90"></div>
	<div class="scale" data-perc="88"></div>
	<div class="scale" data-perc="86"></div>
	<div class="scale" data-perc="84"></div>
	<div class="scale" data-perc="82"></div>
	<div class="scale" data-perc="80"></div>
	<div class="scale" data-perc="78"></div>
	<div class="scale" data-perc="76"></div>
	<div class="scale" data-perc="74"></div>
	<div class="scale" data-perc="72"></div>
	<div class="scale" data-perc="70"></div>
	<div class="scale" data-perc="68"></div>
	<div class="scale" data-perc="66"></div>
	<div class="scale" data-perc="64"></div>
	<div class="scale" data-perc="62"></div>
	<div class="scale" data-perc="60"></div>
	<div class="scale" data-perc="58"></div>
	<div class="scale" data-perc="56"></div>
	<div class="scale" data-perc="54"></div>
	<div class="scale" data-perc="52"></div>
	<div class="scale" data-perc="50"></div>
	<div class="scale" data-perc="48"></div>
	<div class="scale" data-perc="46"></div>
	<div class="scale" data-perc="44"></div>
	<div class="scale" data-perc="42"></div>
	<div class="scale" data-perc="40"></div>
	<div class="scale" data-perc="38"></div>
	<div class="scale" data-perc="36"></div>
	<div class="scale" data-perc="34"></div>
	<div class="scale" data-perc="32"></div>
	<div class="scale" data-perc="30"></div>
	<div class="scale" data-perc="28"></div>
	<div class="scale" data-perc="26"></div>
	<div class="scale" data-perc="24"></div>
	<div class="scale" data-perc="22"></div>
	<div class="scale" data-perc="20"></div>
	<div class="scale" data-perc="18"></div>
	<div class="scale" data-perc="16"></div>
	<div class="scale" data-perc="14"></div>
	<div class="scale" data-perc="12"></div>
	<div class="scale" data-perc="10"></div>
	<div class="scale" data-perc="8"></div>
	<div class="scale" data-perc="6"></div>
	<div class="scale" data-perc="4"></div>
	<div class="scale" data-perc="2"></div>
	<div class="scale" data-perc="0"></div>
	<div class="knob"></div>
	<div class="scalelabel"></div>
</div>
</div>
<div class="faderwrapper">
<div class="fader">
	<div class="scale" data-perc="100"></div>
	<div class="scale" data-perc="98"></div>
	<div class="scale" data-perc="96"></div>
	<div class="scale" data-perc="94"></div>
	<div class="scale" data-perc="92"></div>
	<div class="scale" data-perc="90"></div>
	<div class="scale" data-perc="88"></div>
	<div class="scale" data-perc="86"></div>
	<div class="scale" data-perc="84"></div>
	<div class="scale" data-perc="82"></div>
	<div class="scale" data-perc="80"></div>
	<div class="scale" data-perc="78"></div>
	<div class="scale" data-perc="76"></div>
	<div class="scale" data-perc="74"></div>
	<div class="scale" data-perc="72"></div>
	<div class="scale" data-perc="70"></div>
	<div class="scale" data-perc="68"></div>
	<div class="scale" data-perc="66"></div>
	<div class="scale" data-perc="64"></div>
	<div class="scale" data-perc="62"></div>
	<div class="scale" data-perc="60"></div>
	<div class="scale" data-perc="58"></div>
	<div class="scale" data-perc="56"></div>
	<div class="scale" data-perc="54"></div>
	<div class="scale" data-perc="52"></div>
	<div class="scale" data-perc="50"></div>
	<div class="scale" data-perc="48"></div>
	<div class="scale" data-perc="46"></div>
	<div class="scale" data-perc="44"></div>
	<div class="scale" data-perc="42"></div>
	<div class="scale" data-perc="40"></div>
	<div class="scale" data-perc="38"></div>
	<div class="scale" data-perc="36"></div>
	<div class="scale" data-perc="34"></div>
	<div class="scale" data-perc="32"></div>
	<div class="scale" data-perc="30"></div>
	<div class="scale" data-perc="28"></div>
	<div class="scale" data-perc="26"></div>
	<div class="scale" data-perc="24"></div>
	<div class="scale" data-perc="22"></div>
	<div class="scale" data-perc="20"></div>
	<div class="scale" data-perc="18"></div>
	<div class="scale" data-perc="16"></div>
	<div class="scale" data-perc="14"></div>
	<div class="scale" data-perc="12"></div>
	<div class="scale" data-perc="10"></div>
	<div class="scale" data-perc="8"></div>
	<div class="scale" data-perc="6"></div>
	<div class="scale" data-perc="4"></div>
	<div class="scale" data-perc="2"></div>
	<div class="scale" data-perc="0"></div>
	<div class="knob"></div>
	<div class="scalelabel"></div>
</div>
</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/pvonwedel/css-fader-case-study-Bqazg */
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body {background:#333;height:400px;}
.mainwrapper {
	position:relative;
	display:block;
	padding:40px 60px;
	margin:0 auto;
	width:400px;
}
.faderwrapper {
	position:relative;
	display:block;
	width:50px;
	height:306px;
	float:left;
	margin-right:30px;
}
.faderwrapper:before {
	position:absolute;
	display:block;
	content:"";
	width:2px;
	height:300px;
	top:2px;
	left:23px;
	background:#333;
	border:1px solid rgba(0,0,0,0.4);
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.4),0px 0px 2px 0px rgba(255, 255, 255, 0.25); 
	box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.4),0px 0px 2px 0px rgba(255, 255, 255, 0.25); 
}
.fader{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	margin:0;
	padding:0;
}
.fader .scale {
	position:relative;
	display:block;
	width:100%;
	height:2%;
	margin:0;
	padding:0;
	z-index:10;
	cursor:pointer;
}
.knob {
	position:absolute;
	display:block;
	width:20px;
	height:20px;
	left:14px;
	bottom:-2%;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	border:1px solid rgba(0,0,0,0.9);
	background: rgb(244,244,244);
	background: -moz-radial-gradient(center, ellipse cover,  rgba(244,244,244,1) 0%, rgba(209,209,209,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(244,244,244,1)), color-stop(100%,rgba(209,209,209,1)));
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(244,244,244,1) 0%,rgba(209,209,209,1) 100%);
	background: -o-radial-gradient(center, ellipse cover,  rgba(244,244,244,1) 0%,rgba(209,209,209,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover,  rgba(244,244,244,1) 0%,rgba(209,209,209,1) 100%);
	background: radial-gradient(ellipse at center,  rgba(244,244,244,1) 0%,rgba(209,209,209,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#d1d1d1',GradientType=1 );
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
	z-index:9;
	-webkit-transition: all 100ms linear;
	-moz-transition: all 100ms linear;
	-ms-transition: all 100ms linear;
	-o-transition: all 100ms linear;
	transition: all 100ms linear;
}
.knob:before {
	position:absolute;
	display:block;
	content:"";
	width:6px;
	height:6px;
	top:6px;
	left:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid rgba(0,0,0,0.4);
	background: rgb(226,0,0);
	background: -moz-radial-gradient(center, ellipse cover,  rgba(226,0,0,1) 0%, rgba(137,0,0,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(226,0,0,1)), color-stop(100%,rgba(137,0,0,1)));
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(226,0,0,1) 0%,rgba(137,0,0,1) 100%);
	background: -o-radial-gradient(center, ellipse cover,  rgba(226,0,0,1) 0%,rgba(137,0,0,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover,  rgba(226,0,0,1) 0%,rgba(137,0,0,1) 100%);
	background: radial-gradient(ellipse at center,  rgba(226,0,0,1) 0%,rgba(137,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e20000', endColorstr='#890000',GradientType=1 );
	-webkit-box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.45), 0px 4px 4px 0px rgba(0, 0, 0, 0.2); 
	box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.45), 0px 4px 4px 0px rgba(0, 0, 0, 0.2);

}
.fader .scale:hover ~ .knob:before {
	background: rgb(149,224,0);
	background: -moz-radial-gradient(center, ellipse cover,  rgba(149,224,0,1) 0%, rgba(90,135,0,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(149,224,0,1)), color-stop(100%,rgba(90,135,0,1)));
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(149,224,0,1) 0%,rgba(90,135,0,1) 100%);
	background: -o-radial-gradient(center, ellipse cover,  rgba(149,224,0,1) 0%,rgba(90,135,0,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover,  rgba(149,224,0,1) 0%,rgba(90,135,0,1) 100%);
	background: radial-gradient(ellipse at center,  rgba(149,224,0,1) 0%,rgba(90,135,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95e000', endColorstr='#5a8700',GradientType=1 );
}
.scalelabel {
	position:absolute;
	display:block;
	width:40px;
	height:20px;
	bottom:-2%;
	right:-15px;
	opacity:0;
	border:1px solid rgba(0,0,0,0.6);
	-webkit-border-radius:0 2px 2px 0;
	border-radius:0 2px 2px 0;
	background: rgb(102,102,102);
	background: -moz-linear-gradient(top,  rgba(102,102,102,1) 0%, rgba(51,51,51,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,102,102,1)), color-stop(100%,rgba(51,51,51,1)));
	background: -webkit-linear-gradient(top,  rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%);
	background: -o-linear-gradient(top,  rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%);
	background: -ms-linear-gradient(top,  rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%);
	background: linear-gradient(to bottom,  rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333',GradientType=0 );
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.25),inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.2), 1px 0px 4px 0px rgba(0, 0, 0, 0.5); 
	box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.25),inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.2), 1px 0px 4px 0px rgba(0, 0, 0, 0.5); 
	z-index:8;
	-webkit-transition: all 100ms linear;
	-moz-transition: all 100ms linear;
	-ms-transition: all 100ms linear;
	-o-transition: all 100ms linear;
	transition: all 100ms linear;
}
.scalelabel:before {
	position:relative;
	display:block;
	content:"0";
	color:#fff;
	text-align:right;
	padding-right:5px;
	font-family: 'Montserrat', sans-serif;
	font-size:12px;
	font-weight:bold;
	line-height:20px;
}
.fader .scale[data-perc="0"]:hover ~ .knob,.fader .scale[data-perc="0"]:hover ~ .scalelabel {bottom:-2%;}
.fader .scale[data-perc="2"]:hover ~ .knob,.fader .scale[data-perc="2"]:hover ~ .scalelabel {bottom:0%;}
.fader .scale[data-perc="4"]:hover ~ .knob,.fader .scale[data-perc="4"]:hover ~ .scalelabel {bottom:2%;}
.fader .scale[data-perc="6"]:hover ~ .knob,.fader .scale[data-perc="6"]:hover ~ .scalelabel {bottom:4%}
.fader .scale[data-perc="8"]:hover ~ .knob,.fader .scale[data-perc="8"]:hover ~ .scalelabel {bottom:6%;}
.fader .scale[data-perc="10"]:hover ~ .knob,.fader .scale[data-perc="10"]:hover ~ .scalelabel {bottom:8%}
.fader .scale[data-perc="12"]:hover ~ .knob,.fader .scale[data-perc="12"]:hover ~ .scalelabel {bottom:10%;}
.fader .scale[data-perc="14"]:hover ~ .knob,.fader .scale[data-perc="14"]:hover ~ .scalelabel {bottom:12%;}
.fader .scale[data-perc="16"]:hover ~ .knob,.fader .scale[data-perc="16"]:hover ~ .scalelabel {bottom:14%;}
.fader .scale[data-perc="18"]:hover ~ .knob,.fader .scale[data-perc="18"]:hover ~ .scalelabel {bottom:16%;}
.fader .scale[data-perc="20"]:hover ~ .knob,.fader .scale[data-perc="20"]:hover ~ .scalelabel {bottom:18%;}
.fader .scale[data-perc="22"]:hover ~ .knob,.fader .scale[data-perc="22"]:hover ~ .scalelabel {bottom:20%;}
.fader .scale[data-perc="24"]:hover ~ .knob,.fader .scale[data-perc="24"]:hover ~ .scalelabel {bottom:22%;}
.fader .scale[data-perc="26"]:hover ~ .knob,.fader .scale[data-perc="26"]:hover ~ .scalelabel {bottom:24%;}
.fader .scale[data-perc="28"]:hover ~ .knob,.fader .scale[data-perc="28"]:hover ~ .scalelabel {bottom:26%;}
.fader .scale[data-perc="30"]:hover ~ .knob,.fader .scale[data-perc="30"]:hover ~ .scalelabel {bottom:28%;}
.fader .scale[data-perc="32"]:hover ~ .knob,.fader .scale[data-perc="32"]:hover ~ .scalelabel {bottom:30%;}
.fader .scale[data-perc="34"]:hover ~ .knob,.fader .scale[data-perc="34"]:hover ~ .scalelabel {bottom:32%;}
.fader .scale[data-perc="36"]:hover ~ .knob,.fader .scale[data-perc="36"]:hover ~ .scalelabel {bottom:34%;}
.fader .scale[data-perc="38"]:hover ~ .knob,.fader .scale[data-perc="38"]:hover ~ .scalelabel {bottom:36%;}
.fader .scale[data-perc="40"]:hover ~ .knob,.fader .scale[data-perc="40"]:hover ~ .scalelabel {bottom:38%;}
.fader .scale[data-perc="42"]:hover ~ .knob,.fader .scale[data-perc="42"]:hover ~ .scalelabel {bottom:40%;}
.fader .scale[data-perc="44"]:hover ~ .knob,.fader .scale[data-perc="44"]:hover ~ .scalelabel {bottom:42%;}
.fader .scale[data-perc="46"]:hover ~ .knob,.fader .scale[data-perc="46"]:hover ~ .scalelabel {bottom:44%;}
.fader .scale[data-perc="48"]:hover ~ .knob,.fader .scale[data-perc="48"]:hover ~ .scalelabel {bottom:46%;}
.fader .scale[data-perc="50"]:hover ~ .knob,.fader .scale[data-perc="50"]:hover ~ .scalelabel {bottom:48%;}
.fader .scale[data-perc="52"]:hover ~ .knob,.fader .scale[data-perc="52"]:hover ~ .scalelabel {bottom:50%;}
.fader .scale[data-perc="54"]:hover ~ .knob,.fader .scale[data-perc="54"]:hover ~ .scalelabel {bottom:52%;}
.fader .scale[data-perc="56"]:hover ~ .knob,.fader .scale[data-perc="56"]:hover ~ .scalelabel {bottom:54%;}
.fader .scale[data-perc="58"]:hover ~ .knob,.fader .scale[data-perc="58"]:hover ~ .scalelabel {bottom:56%;}
.fader .scale[data-perc="60"]:hover ~ .knob,.fader .scale[data-perc="60"]:hover ~ .scalelabel {bottom:58%;}
.fader .scale[data-perc="62"]:hover ~ .knob,.fader .scale[data-perc="62"]:hover ~ .scalelabel {bottom:60%;}
.fader .scale[data-perc="64"]:hover ~ .knob,.fader .scale[data-perc="64"]:hover ~ .scalelabel {bottom:62%;}
.fader .scale[data-perc="66"]:hover ~ .knob,.fader .scale[data-perc="66"]:hover ~ .scalelabel {bottom:64%;}
.fader .scale[data-perc="68"]:hover ~ .knob,.fader .scale[data-perc="68"]:hover ~ .scalelabel {bottom:66%;}
.fader .scale[data-perc="70"]:hover ~ .knob,.fader .scale[data-perc="70"]:hover ~ .scalelabel {bottom:68%;}
.fader .scale[data-perc="72"]:hover ~ .knob,.fader .scale[data-perc="72"]:hover ~ .scalelabel {bottom:70%;}
.fader .scale[data-perc="74"]:hover ~ .knob,.fader .scale[data-perc="74"]:hover ~ .scalelabel {bottom:72%;}
.fader .scale[data-perc="76"]:hover ~ .knob,.fader .scale[data-perc="76"]:hover ~ .scalelabel {bottom:74%;}
.fader .scale[data-perc="78"]:hover ~ .knob,.fader .scale[data-perc="78"]:hover ~ .scalelabel {bottom:76%;}
.fader .scale[data-perc="80"]:hover ~ .knob,.fader .scale[data-perc="80"]:hover ~ .scalelabel {bottom:78%;}
.fader .scale[data-perc="82"]:hover ~ .knob,.fader .scale[data-perc="82"]:hover ~ .scalelabel {bottom:80%;}
.fader .scale[data-perc="84"]:hover ~ .knob,.fader .scale[data-perc="84"]:hover ~ .scalelabel {bottom:82%;}
.fader .scale[data-perc="86"]:hover ~ .knob,.fader .scale[data-perc="86"]:hover ~ .scalelabel {bottom:84%;}
.fader .scale[data-perc="88"]:hover ~ .knob,.fader .scale[data-perc="88"]:hover ~ .scalelabel {bottom:86%;}
.fader .scale[data-perc="90"]:hover ~ .knob,.fader .scale[data-perc="90"]:hover ~ .scalelabel {bottom:88%;}
.fader .scale[data-perc="92"]:hover ~ .knob,.fader .scale[data-perc="92"]:hover ~ .scalelabel {bottom:90%;}
.fader .scale[data-perc="94"]:hover ~ .knob,.fader .scale[data-perc="94"]:hover ~ .scalelabel {bottom:92%;}
.fader .scale[data-perc="96"]:hover ~ .knob,.fader .scale[data-perc="96"]:hover ~ .scalelabel {bottom:94%;}
.fader .scale[data-perc="98"]:hover ~ .knob,.fader .scale[data-perc="98"]:hover ~ .scalelabel {bottom:96%;}
.fader .scale[data-perc="100"]:hover ~ .knob,.fader .scale[data-perc="100"]:hover ~ .scalelabel {bottom:98%;}

.fader .scale[data-perc="0"]:hover ~ .scalelabel:before {content:"0";}
.fader .scale[data-perc="2"]:hover ~ .scalelabel:before {content:"2";}
.fader .scale[data-perc="4"]:hover ~ .scalelabel:before {content:"4";}
.fader .scale[data-perc="6"]:hover ~ .scalelabel:before {content:"6";}
.fader .scale[data-perc="8"]:hover ~ .scalelabel:before {content:"8";}
.fader .scale[data-perc="10"]:hover ~ .scalelabel:before {content:"10";}
.fader .scale[data-perc="12"]:hover ~ .scalelabel:before {content:"12";}
.fader .scale[data-perc="14"]:hover ~ .scalelabel:before {content:"14";}
.fader .scale[data-perc="16"]:hover ~ .scalelabel:before {content:"16";}
.fader .scale[data-perc="18"]:hover ~ .scalelabel:before {content:"18";}
.fader .scale[data-perc="20"]:hover ~ .scalelabel:before {content:"20";}
.fader .scale[data-perc="22"]:hover ~ .scalelabel:before {content:"22";}
.fader .scale[data-perc="24"]:hover ~ .scalelabel:before {content:"24";}
.fader .scale[data-perc="26"]:hover ~ .scalelabel:before {content:"26";}
.fader .scale[data-perc="28"]:hover ~ .scalelabel:before {content:"28";}
.fader .scale[data-perc="30"]:hover ~ .scalelabel:before {content:"30";}
.fader .scale[data-perc="32"]:hover ~ .scalelabel:before {content:"32";}
.fader .scale[data-perc="34"]:hover ~ .scalelabel:before {content:"34";}
.fader .scale[data-perc="36"]:hover ~ .scalelabel:before {content:"36";}
.fader .scale[data-perc="38"]:hover ~ .scalelabel:before {content:"38";}
.fader .scale[data-perc="40"]:hover ~ .scalelabel:before {content:"40";}
.fader .scale[data-perc="42"]:hover ~ .scalelabel:before {content:"42";}
.fader .scale[data-perc="44"]:hover ~ .scalelabel:before {content:"44";}
.fader .scale[data-perc="46"]:hover ~ .scalelabel:before {content:"46";}
.fader .scale[data-perc="48"]:hover ~ .scalelabel:before {content:"48";}
.fader .scale[data-perc="50"]:hover ~ .scalelabel:before {content:"50";}
.fader .scale[data-perc="52"]:hover ~ .scalelabel:before {content:"52";}
.fader .scale[data-perc="54"]:hover ~ .scalelabel:before {content:"54";}
.fader .scale[data-perc="56"]:hover ~ .scalelabel:before {content:"56";}
.fader .scale[data-perc="58"]:hover ~ .scalelabel:before {content:"58";}
.fader .scale[data-perc="60"]:hover ~ .scalelabel:before {content:"60";}
.fader .scale[data-perc="62"]:hover ~ .scalelabel:before {content:"62";}
.fader .scale[data-perc="64"]:hover ~ .scalelabel:before {content:"64";}
.fader .scale[data-perc="66"]:hover ~ .scalelabel:before {content:"66";}
.fader .scale[data-perc="68"]:hover ~ .scalelabel:before {content:"68";}
.fader .scale[data-perc="70"]:hover ~ .scalelabel:before {content:"70";}
.fader .scale[data-perc="72"]:hover ~ .scalelabel:before {content:"72";}
.fader .scale[data-perc="74"]:hover ~ .scalelabel:before {content:"74";}
.fader .scale[data-perc="76"]:hover ~ .scalelabel:before {content:"76";}
.fader .scale[data-perc="78"]:hover ~ .scalelabel:before {content:"78";}
.fader .scale[data-perc="80"]:hover ~ .scalelabel:before {content:"80";}
.fader .scale[data-perc="82"]:hover ~ .scalelabel:before {content:"82";}
.fader .scale[data-perc="84"]:hover ~ .scalelabel:before {content:"84";}
.fader .scale[data-perc="86"]:hover ~ .scalelabel:before {content:"86";}
.fader .scale[data-perc="88"]:hover ~ .scalelabel:before {content:"88";}
.fader .scale[data-perc="90"]:hover ~ .scalelabel:before {content:"90";}
.fader .scale[data-perc="92"]:hover ~ .scalelabel:before {content:"92";}
.fader .scale[data-perc="94"]:hover ~ .scalelabel:before {content:"94";}
.fader .scale[data-perc="96"]:hover ~ .scalelabel:before {content:"96";}
.fader .scale[data-perc="98"]:hover ~ .scalelabel:before {content:"98";}
.fader .scale[data-perc="100"]:hover ~ .scalelabel:before {content:"100";}

.fader .scale:hover ~ .scalelabel {opacity:1;}

Comments