volume
parent
2d529b7e9b
commit
3b04680856
273
css/app.css
273
css/app.css
|
|
@ -185,6 +185,7 @@ body {
|
||||||
transform: translate(-50%, -100%);
|
transform: translate(-50%, -100%);
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-height: 500px) {
|
@media (min-height: 500px) {
|
||||||
.container {
|
.container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -202,6 +203,7 @@ body {
|
||||||
height: 300px;
|
height: 300px;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.range-slider:before {
|
.range-slider:before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -2em;
|
top: -2em;
|
||||||
|
|
@ -210,6 +212,7 @@ body {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.range-slider__thumb {
|
.range-slider__thumb {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 5px;
|
left: 5px;
|
||||||
|
|
@ -223,6 +226,7 @@ body {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.range-slider__bar {
|
.range-slider__bar {
|
||||||
left: 16px;
|
left: 16px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -232,6 +236,7 @@ body {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.range-slider input[type=range][orient=vertical] {
|
.range-slider input[type=range][orient=vertical] {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -242,9 +247,12 @@ body {
|
||||||
writing-mode: bt-lr;
|
writing-mode: bt-lr;
|
||||||
-webkit-appearance: slider-vertical;
|
-webkit-appearance: slider-vertical;
|
||||||
}
|
}
|
||||||
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
|
|
||||||
|
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track,
|
||||||
|
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
|
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
|
||||||
border: none;
|
border: none;
|
||||||
background: #343440;
|
background: #343440;
|
||||||
|
|
@ -253,6 +261,7 @@ body {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 0 0 2px #3d3d4a;
|
box-shadow: 0 0 0 2px #3d3d4a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.range-slider input[type=range][orient=vertical]::-moz-range-track {
|
.range-slider input[type=range][orient=vertical]::-moz-range-track {
|
||||||
border: none;
|
border: none;
|
||||||
background: #343440;
|
background: #343440;
|
||||||
|
|
@ -261,6 +270,7 @@ body {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 0 0 2px #3d3d4a;
|
box-shadow: 0 0 0 2px #3d3d4a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.range-slider input[type=range][orient=vertical]::-ms-track {
|
.range-slider input[type=range][orient=vertical]::-ms-track {
|
||||||
border: none;
|
border: none;
|
||||||
background: #343440;
|
background: #343440;
|
||||||
|
|
@ -271,19 +281,25 @@ body {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.range-slider input[type=range][orient=vertical]::-ms-fill-lower, .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .range-slider input[type=range][orient=vertical]::-ms-tooltip {
|
|
||||||
|
.range-slider input[type=range][orient=vertical]::-ms-fill-lower,
|
||||||
|
.range-slider input[type=range][orient=vertical]::-ms-fill-upper,
|
||||||
|
.range-slider input[type=range][orient=vertical]::-ms-tooltip {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
|
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
|
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.range-slider input[type=range][orient=vertical]::-ms-thumb {
|
.range-slider input[type=range][orient=vertical]::-ms-thumb {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
|
@ -309,6 +325,7 @@ body {
|
||||||
margin: -6px 0px 0px 14px !important;
|
margin: -6px 0px 0px 14px !important;
|
||||||
border-width: 6px 104px 6px 4px;
|
border-width: 6px 104px 6px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-handle:before {
|
#handle1 .rs-handle:before {
|
||||||
display: block;
|
display: block;
|
||||||
content: " ";
|
content: " ";
|
||||||
|
|
@ -320,10 +337,12 @@ body {
|
||||||
bottom: -11px;
|
bottom: -11px;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-tooltip {
|
#handle1 .rs-tooltip {
|
||||||
top: 75%;
|
top: 75%;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-tooltip div {
|
#handle1 .rs-tooltip div {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: orange;
|
background: orange;
|
||||||
|
|
@ -332,9 +351,11 @@ body {
|
||||||
padding: 1px 5px 2px;
|
padding: 1px 5px 2px;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-range-color {
|
#handle1 .rs-range-color {
|
||||||
background-color: #DB5959;
|
background-color: #DB5959;
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-path-color {
|
#handle1 .rs-path-color {
|
||||||
background-color: #F0C5C5;
|
background-color: #F0C5C5;
|
||||||
}
|
}
|
||||||
|
|
@ -346,12 +367,254 @@ body {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
|
-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
|
||||||
background:
|
background:
|
||||||
linear-gradient(#000 0 0) 0/0% no-repeat
|
linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
|
||||||
#ddd;
|
|
||||||
animation: p4 2s infinite steps(6);
|
animation: p4 2s infinite steps(6);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes p4 {
|
@keyframes p4 {
|
||||||
100% {background-size:120%}
|
100% {
|
||||||
|
background-size: 120%
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
/* margin: 1rem 0; */
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
top: -12px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider .divider-text {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
/* padding: 0rem 1rem; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider .divider-text:before {
|
||||||
|
right: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider .divider-text:before,
|
||||||
|
.divider .divider-text:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 100vw;
|
||||||
|
border-top: 2px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.redio-switche{
|
||||||
|
background-color: #000;
|
||||||
|
padding: 2px;
|
||||||
|
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.redio-switche .btn-check:checked+.btn{
|
||||||
|
background-color: #1BC8F3;
|
||||||
|
border: 0px;
|
||||||
|
color: #1BC8F3;
|
||||||
|
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35)
|
||||||
|
}
|
||||||
|
|
||||||
|
.redio-switche .btn{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider-box .volume-slider{
|
||||||
|
display: inline-block;
|
||||||
|
width: 45px;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
height: 300px;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider input[type=range][orient=vertical] {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
writing-mode: bt-lr;
|
||||||
|
-webkit-appearance: slider-vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track,
|
||||||
|
.volume-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
|
||||||
|
border: none;
|
||||||
|
background: #000;
|
||||||
|
width: 18px;
|
||||||
|
border-color: #343440;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: rgba(255, 255, 255, 0.25) 5px 0 5px -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider input[type=range][orient=vertical]::-moz-range-track {
|
||||||
|
border: none;
|
||||||
|
background: #343440;
|
||||||
|
width: 18px;
|
||||||
|
border-color: #343440;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: rgba(255, 255, 255, 0.25) 5px 0 5px -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider input[type=range][orient=vertical]::-ms-track {
|
||||||
|
border: none;
|
||||||
|
background: #343440;
|
||||||
|
width: 18px;
|
||||||
|
border-color: #343440;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: rgba(255, 255, 255, 0.25) 5px 0 5px -5px;
|
||||||
|
color: transparent;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider input[type=range][orient=vertical]::-ms-fill-lower,
|
||||||
|
.volume-slider input[type=range][orient=vertical]::-ms-fill-upper,
|
||||||
|
.volume-slider input[type=range][orient=vertical]::-ms-tooltip {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider input[type=range][orient=vertical]::-moz-range-thumb {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider input[type=range][orient=vertical]::-ms-thumb {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider-box .range-slider-bar {
|
||||||
|
left: 16px;
|
||||||
|
bottom: 3px;
|
||||||
|
position: absolute;
|
||||||
|
background: linear-gradient(dodgerblue, #1BC8F3);
|
||||||
|
pointer-events: none;
|
||||||
|
width: 13px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider-box .range-slider-thumb {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
width: 45px;
|
||||||
|
height: 59px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: #777;
|
||||||
|
font-size: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
background-image: url(../images/button.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.volume-ruler {
|
||||||
|
position: relative;
|
||||||
|
width: 14px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm {
|
||||||
|
position: absolute;
|
||||||
|
border-top: 1px solid #555;
|
||||||
|
height: 10%;
|
||||||
|
width: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .mm {
|
||||||
|
position: absolute;
|
||||||
|
border-top: 1px solid #555;
|
||||||
|
height: 80%;
|
||||||
|
width: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:after {
|
||||||
|
position: absolute;
|
||||||
|
right: -15px;
|
||||||
|
top: -5px;
|
||||||
|
font: 11px/1 sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .mm {
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(1) {
|
||||||
|
top: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(1):after {
|
||||||
|
content: "0";
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(2) {
|
||||||
|
top: 16.6666%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(2):after {
|
||||||
|
content: "1";
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(3) {
|
||||||
|
top: 33.3333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(3):after {
|
||||||
|
content: "2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(4) {
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(4):after {
|
||||||
|
content: "3";
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(5) {
|
||||||
|
top: 66.6666%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(5):after {
|
||||||
|
content: "4";
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(6) {
|
||||||
|
top: 83.3333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(6):after {
|
||||||
|
content: "5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(7) {
|
||||||
|
top: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-ruler .cm:nth-of-type(7):after {
|
||||||
|
content: "6";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,180 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title></title>
|
||||||
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="css/app.css" rel="stylesheet">
|
||||||
|
<link href="css/roundslider.min.css" rel="stylesheet">
|
||||||
|
<script src="js/jquery-3.7.1.js"></script>
|
||||||
|
<script src="js/roundslider.min.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="h-100 text-center text-bg-dark content-warp">
|
||||||
|
<div class="d-flex w-100 h-100 mx-auto flex-column">
|
||||||
|
<header class="mb-auto pb-5">
|
||||||
|
<div class="dotblock d-flex justify-content-between px-5 py-4">
|
||||||
|
<div class="fs-3">GEAZAN</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-center fw-bold border-black nav">
|
||||||
|
<div>INPUT</div>
|
||||||
|
<div>EQ</div>
|
||||||
|
<div>VOLUME</div>
|
||||||
|
<div>RS232</div>
|
||||||
|
<div class="active"><a href="network.html">NETWORK</a></div>
|
||||||
|
<div class="">
|
||||||
|
<a href="password.html">PASSWORD</a>
|
||||||
|
</div>
|
||||||
|
<div class="last">SYSTEM</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="px-3 d-flex justify-content-center">
|
||||||
|
<div class="form">
|
||||||
|
<div class="border border-black m-6 password-form">
|
||||||
|
<div class=" m-5 mx-auto form" style="width: 500px;">
|
||||||
|
<div>
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="range-slider" data-slider-value="50">
|
||||||
|
<input type="range" orient="vertical" min="0" max="100" value="50">
|
||||||
|
<div class="range-slider__bar" style="height: calc(45% + 15px);"></div>
|
||||||
|
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="range-slider" data-slider-value="50">
|
||||||
|
<input type="range" orient="vertical" min="0" max="100" value="50">
|
||||||
|
<div class="range-slider__bar theme1" style="height: calc(45% + 15px);"></div>
|
||||||
|
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="range-slider" data-slider-value="50">
|
||||||
|
<input type="range" orient="vertical" min="0" max="100" value="50">
|
||||||
|
<div class="range-slider__bar theme2" style="height: calc(45% + 15px);"></div>
|
||||||
|
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="range-slider" data-slider-value="50">
|
||||||
|
<input type="range" orient="vertical" min="0" max="100" value="50">
|
||||||
|
<div class="range-slider__bar theme3" style="height: calc(45% + 15px);"></div>
|
||||||
|
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="ruleraxisy">
|
||||||
|
<ul class="scaley">
|
||||||
|
<li></li>
|
||||||
|
<li>50</li>
|
||||||
|
<li>100</li>
|
||||||
|
<li>150</li>
|
||||||
|
<li>200</li>
|
||||||
|
<li>250</li>
|
||||||
|
<li>300</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="progress-4"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="box-inner">
|
||||||
|
<div>
|
||||||
|
<div class="row _slider_customizations cus_handle">
|
||||||
|
<div class="block">
|
||||||
|
<div class="cell">
|
||||||
|
<div id="handle1"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 pb-5">
|
||||||
|
<button type="button" class="btn btn-dark border border-black px-5">Confirm</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="mt-auto text-white-50">
|
||||||
|
<div class="dotblock d-flex justify-content-between px-5 py-4">
|
||||||
|
<div class="">Geazan</div>
|
||||||
|
<div>www.geazan.com</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
let app = (() => {
|
||||||
|
|
||||||
|
function updateSlider(element) {
|
||||||
|
if (element) {
|
||||||
|
let parent = element.parentElement,
|
||||||
|
lastValue = parent.getAttribute('data-slider-value');
|
||||||
|
|
||||||
|
if (lastValue === element.value) {
|
||||||
|
return; // No value change, no need to update then
|
||||||
|
}
|
||||||
|
|
||||||
|
parent.setAttribute('data-slider-value', element.value);
|
||||||
|
let $thumb = parent.querySelector('.range-slider__thumb'),
|
||||||
|
$bar = parent.querySelector('.range-slider__bar'),
|
||||||
|
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
|
||||||
|
|
||||||
|
$thumb.style.bottom = `${pct}%`;
|
||||||
|
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
|
||||||
|
$thumb.textContent = `${element.value}%`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
updateSlider: updateSlider
|
||||||
|
};
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
||||||
|
(function initAndSetupTheSliders() {
|
||||||
|
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
|
||||||
|
inputs.forEach(input => input.setAttribute('value', '50'));
|
||||||
|
inputs.forEach(input => app.updateSlider(input));
|
||||||
|
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
|
||||||
|
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
|
||||||
|
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
|
||||||
|
})();
|
||||||
|
|
||||||
|
$("#handle1").roundSlider({
|
||||||
|
sliderType: "min-range",
|
||||||
|
editableTooltip: false,
|
||||||
|
radius: 105,
|
||||||
|
width: 16,
|
||||||
|
value: 38,
|
||||||
|
handleSize: 0,
|
||||||
|
handleShape: "square",
|
||||||
|
circleShape: "custom-half",
|
||||||
|
startAngle:0,
|
||||||
|
endAgle:359.9
|
||||||
|
// startAngle: 315,
|
||||||
|
// tooltipFormat: "changeTooltip"
|
||||||
|
});
|
||||||
|
|
||||||
|
function changeTooltip(e) {
|
||||||
|
var val = e.value, speed;
|
||||||
|
if (val < 20) speed = "Slow";
|
||||||
|
else if (val < 40) speed = "Normal";
|
||||||
|
else if (val < 70) speed = "Speed";
|
||||||
|
else speed = "Very Speed";
|
||||||
|
|
||||||
|
return val + " km/h" + "<div>" + speed + "<div>";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
123
volume.html
123
volume.html
|
|
@ -32,8 +32,95 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="px-3 d-flex justify-content-center">
|
<main class="px-3 d-flex justify-content-center">
|
||||||
|
<div>
|
||||||
|
<div style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
|
||||||
|
<div class="divider">
|
||||||
|
<div class="divider-text"><span class="fw-bold">MIC 1</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 d-flex justify-content-center">
|
||||||
|
<div style="width: 350px;">
|
||||||
|
<div class="d-flex justify-content-center align-items-center">
|
||||||
|
<div class="me-3">48V Phantom</div>
|
||||||
|
<div class="d-flex redio-switche">
|
||||||
|
<input type="radio" class="btn-check" name="options-base" id="option5"
|
||||||
|
autocomplete="off" checked>
|
||||||
|
<label class="btn" for="option5">ON</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="options-base" id="option6"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn" for="option6">OFF</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-center mt-3" style="height: 350px;">
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="volume-slider-box">
|
||||||
|
<div class="volume-slider" data-slider-value="50">
|
||||||
|
<input type="range" orient="vertical" min="0" max="100" value="50">
|
||||||
|
<div class="range-slider-bar" style="height: calc(45% + 15px);"></div>
|
||||||
|
<div class="range-slider-thumb" style="bottom: 45%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<section class="volume-ruler">
|
||||||
|
<section class="cm">
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="form">
|
<div class="form">
|
||||||
<div class="border border-black m-6 password-form">
|
|
||||||
|
<div>
|
||||||
|
<div class="progress-4"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="box-inner">
|
||||||
|
<div>
|
||||||
|
<div class="row _slider_customizations cus_handle">
|
||||||
|
<div class="block">
|
||||||
|
<div class="cell">
|
||||||
|
<div id="handle1"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 pb-5">
|
||||||
|
<button type="button" class="btn btn-dark border border-black px-5">Confirm</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="border border-black m-6 password-form">
|
||||||
<div class=" m-5 mx-auto form" style="width: 500px;">
|
<div class=" m-5 mx-auto form" style="width: 500px;">
|
||||||
<div>
|
<div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
@ -76,31 +163,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div>
|
|
||||||
<div class="progress-4"></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<div class="box-inner">
|
|
||||||
<div>
|
|
||||||
<div class="row _slider_customizations cus_handle">
|
|
||||||
<div class="block">
|
|
||||||
<div class="cell">
|
|
||||||
<div id="handle1"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-5 pb-5">
|
|
||||||
<button type="button" class="btn btn-dark border border-black px-5">Confirm</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
@ -127,13 +190,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
parent.setAttribute('data-slider-value', element.value);
|
parent.setAttribute('data-slider-value', element.value);
|
||||||
let $thumb = parent.querySelector('.range-slider__thumb'),
|
let $thumb = parent.querySelector('.range-slider-thumb'),
|
||||||
$bar = parent.querySelector('.range-slider__bar'),
|
$bar = parent.querySelector('.range-slider-bar'),
|
||||||
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
|
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
|
||||||
|
|
||||||
$thumb.style.bottom = `${pct}%`;
|
$thumb.style.bottom = `${pct}%`;
|
||||||
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
|
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
|
||||||
$thumb.textContent = `${element.value}%`;
|
// $thumb.textContent = `${element.value}%`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
|
|
@ -143,7 +206,7 @@
|
||||||
})();
|
})();
|
||||||
|
|
||||||
(function initAndSetupTheSliders() {
|
(function initAndSetupTheSliders() {
|
||||||
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
|
const inputs = [].slice.call(document.querySelectorAll('.volume-slider input'));
|
||||||
inputs.forEach(input => input.setAttribute('value', '50'));
|
inputs.forEach(input => input.setAttribute('value', '50'));
|
||||||
inputs.forEach(input => app.updateSlider(input));
|
inputs.forEach(input => app.updateSlider(input));
|
||||||
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
|
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue