refix
parent
0ed8578625
commit
753b748135
153
css/app.css
153
css/app.css
|
|
@ -95,12 +95,17 @@ body {
|
||||||
|
|
||||||
.nav a {
|
.nav a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav a:visited {
|
.nav a:visited，a:active {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav .active a {
|
||||||
|
color: #1BC8F3;
|
||||||
|
}
|
||||||
|
|
||||||
.password-form {
|
.password-form {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
}
|
}
|
||||||
|
|
@ -319,30 +324,39 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-handle {
|
#handle1 .rs-handle {
|
||||||
background-color: transparent;
|
background-color: #000000;
|
||||||
border: 8px solid transparent;
|
|
||||||
border-right-color: black;
|
|
||||||
margin: -6px 0px 0px 14px !important;
|
|
||||||
border-width: 6px 104px 6px 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-handle:before {
|
#handle1 .rs-handle:before {
|
||||||
display: block;
|
display: block;
|
||||||
content: " ";
|
content: " ";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 22px;
|
height: 94px;
|
||||||
width: 22px;
|
width: 94px;
|
||||||
background: black;
|
background: black;
|
||||||
right: -11px;
|
right: -47px;
|
||||||
bottom: -11px;
|
bottom: -47px;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
|
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-tooltip {
|
#handle1 .rs-tooltip {
|
||||||
top: 75%;
|
top: 57px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
border-radius: 25px;
|
||||||
|
background: #000;
|
||||||
|
color: white;
|
||||||
|
display: inline-block;
|
||||||
|
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#handle1 .rs-tooltip div {
|
#handle1 .rs-tooltip div {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: orange;
|
background: orange;
|
||||||
|
|
@ -353,14 +367,32 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-range-color {
|
#handle1 .rs-range-color {
|
||||||
background-color: #DB5959;
|
background-color: #1BC8F3;
|
||||||
|
text-shadow:
|
||||||
|
0 0 7px #fff,
|
||||||
|
0 0 10px #fff,
|
||||||
|
0 0 21px #fff,
|
||||||
|
0 0 42px #0fa,
|
||||||
|
0 0 82px #0fa,
|
||||||
|
0 0 92px #0fa,
|
||||||
|
0 0 102px #0fa,
|
||||||
|
0 0 151px #0fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-path-color {
|
#handle1 .rs-path-color {
|
||||||
background-color: #F0C5C5;
|
background-color: #000;
|
||||||
|
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rs-border {
|
||||||
|
border: 1px solid #000 !important;
|
||||||
|
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-bg-color {
|
||||||
|
background-color: #1E1F21 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.progress-4 {
|
.progress-4 {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
|
|
@ -410,25 +442,25 @@ body {
|
||||||
border-top: 2px solid #000;
|
border-top: 2px solid #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.redio-switche{
|
.redio-switche {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
|
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.redio-switche .btn-check:checked+.btn{
|
.redio-switche .btn-check:checked+.btn {
|
||||||
background-color: #1BC8F3;
|
background-color: #1BC8F3;
|
||||||
border: 0px;
|
border: 0px;
|
||||||
color: #1BC8F3;
|
color: #1BC8F3;
|
||||||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35)
|
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35)
|
||||||
}
|
}
|
||||||
|
|
||||||
.redio-switche .btn{
|
.redio-switche .btn {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volume-slider-box .volume-slider{
|
.volume-slider-box .volume-slider {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -528,15 +560,16 @@ body {
|
||||||
background-image: url(../images/button.png);
|
background-image: url(../images/button.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-value{
|
.slider-value {
|
||||||
border: none;
|
border: none;
|
||||||
background: #000;
|
background: #000;
|
||||||
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
|
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
|
||||||
color: #fff;
|
color: #555;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
font-size: 85%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-value:focus{
|
.slider-value:focus {
|
||||||
border: none;
|
border: none;
|
||||||
background: #000;
|
background: #000;
|
||||||
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
|
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
|
||||||
|
|
@ -607,12 +640,13 @@ body {
|
||||||
.volume-ruler .cm:nth-of-type(6) {
|
.volume-ruler .cm:nth-of-type(6) {
|
||||||
top: 83.3333%;
|
top: 83.3333%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volume-ruler .cm:nth-of-type(7) {
|
.volume-ruler .cm:nth-of-type(7) {
|
||||||
top: 100%;
|
top: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.volume-ruler .cm>span{
|
.volume-ruler .cm>span {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -25px;
|
right: -25px;
|
||||||
top: -7px;
|
top: -7px;
|
||||||
|
|
@ -620,4 +654,81 @@ body {
|
||||||
color: #555;
|
color: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ============ */
|
||||||
|
.item {
|
||||||
|
position: absolute;
|
||||||
|
width: 8px;
|
||||||
|
/* border-radius: 6px; */
|
||||||
|
background-color: #1f94ea;
|
||||||
|
-webkit-mask: linear-gradient(180deg, #000 70%, #0000 0) 0/20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music .one {
|
||||||
|
height: 100px;
|
||||||
|
transform: translateX(-60px);
|
||||||
|
}
|
||||||
|
.music .two {
|
||||||
|
height: 53px;
|
||||||
|
transform: translateX(-40px);
|
||||||
|
}
|
||||||
|
.music .three {
|
||||||
|
height: 36px;
|
||||||
|
transform: translateX(-20px);
|
||||||
|
}
|
||||||
|
.music .four {
|
||||||
|
height: 70px;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.music .five {
|
||||||
|
height: 30px;
|
||||||
|
transform: translateX(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.music .six {
|
||||||
|
height: 40px;
|
||||||
|
transform: translateX(40px);
|
||||||
|
}
|
||||||
|
.music .seven {
|
||||||
|
height: 50px;
|
||||||
|
transform: translateX(60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes radius-animation {
|
||||||
|
100% {
|
||||||
|
height: 10px;
|
||||||
|
/* border-radius: 50%; */
|
||||||
|
filter: contrast(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.music .one {
|
||||||
|
animation: radius-animation .3s ease;
|
||||||
|
}
|
||||||
|
.music .two {
|
||||||
|
animation: radius-animation .6s ease;
|
||||||
|
}
|
||||||
|
.music .three {
|
||||||
|
animation: radius-animation .57s ease;
|
||||||
|
}
|
||||||
|
.music .four {
|
||||||
|
animation: radius-animation .52s ease;
|
||||||
|
}
|
||||||
|
.music .five {
|
||||||
|
animation: radius-animation .4s ease;
|
||||||
|
}
|
||||||
|
.music .six {
|
||||||
|
animation: radius-animation .3s ease;
|
||||||
|
}
|
||||||
|
.music .seven {
|
||||||
|
animation: radius-animation .7s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.music .item {
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
-webkit-animation-iteration-count: infinite;
|
||||||
|
animation-direction: alternate;
|
||||||
|
-webkit-animation-direction: alternate;
|
||||||
|
}
|
||||||
368
volume.html
368
volume.html
|
|
@ -33,12 +33,206 @@
|
||||||
|
|
||||||
<main class="px-3 d-flex justify-content-center">
|
<main class="px-3 d-flex justify-content-center">
|
||||||
<div>
|
<div>
|
||||||
<div style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
|
<div class="d-flex">
|
||||||
|
<div class="me-3"
|
||||||
|
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: 250px;">
|
||||||
|
<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="volume-slider-container">
|
||||||
|
<div class="d-flex justify-content-center mt-3">
|
||||||
|
<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" step="0.1"
|
||||||
|
value="30">
|
||||||
|
<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">
|
||||||
|
<span>0</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-10</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-20</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-30</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-40</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-50</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-60</span>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ms-5" style="display: grid;grid-template-rows: 1fr 1fr 1fr;">
|
||||||
|
<div>
|
||||||
|
按钮1
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
按钮2
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
按钮3
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="slider-value-box">
|
||||||
|
<input class="slider-value" style="width: 50px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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: 320px;">
|
||||||
|
<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="volume-slider-container">
|
||||||
|
<div class="d-flex justify-content-center mt-3">
|
||||||
|
<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" step="0.1"
|
||||||
|
value="30">
|
||||||
|
<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">
|
||||||
|
<span>0</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-10</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-20</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-30</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-40</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-50</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-60</span>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="slider-value-box">
|
||||||
|
<input class="slider-value" style="width: 60px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row d-flex">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="music">
|
||||||
|
<div class="item one"></div>
|
||||||
|
<div class="item two"></div>
|
||||||
|
<div class="item three"></div>
|
||||||
|
<div class="item four"></div>
|
||||||
|
<div class="item five"></div>
|
||||||
|
<div class="item six"></div>
|
||||||
|
<div class="item seven"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="progress-4"></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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="d-flex justify-content-center">
|
||||||
|
<div class="me-3"
|
||||||
|
style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
|
||||||
<div class="divider">
|
<div class="divider">
|
||||||
<div class="divider-text"><span class="fw-bold">MIC 1</span></div>
|
<div class="divider-text"><span class="fw-bold">MIC 1</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-3 d-flex justify-content-center">
|
<div class="p-3 d-flex justify-content-center">
|
||||||
<div style="width: 320px;">
|
<div style="width: 250px;">
|
||||||
<div class="d-flex justify-content-center align-items-center">
|
<div class="d-flex justify-content-center align-items-center">
|
||||||
<div class="me-3">48V Phantom</div>
|
<div class="me-3">48V Phantom</div>
|
||||||
<div class="d-flex redio-switche">
|
<div class="d-flex redio-switche">
|
||||||
|
|
@ -56,7 +250,8 @@
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<div class="volume-slider-box">
|
<div class="volume-slider-box">
|
||||||
<div class="volume-slider" data-slider-value="50">
|
<div class="volume-slider" data-slider-value="50">
|
||||||
<input type="range" orient="vertical" min="0" max="60" step="0.1" value="30">
|
<input type="range" orient="vertical" min="0" max="100" step="0.1"
|
||||||
|
value="30">
|
||||||
<div class="range-slider-bar" style="height: calc(45% + 15px);"></div>
|
<div class="range-slider-bar" style="height: calc(45% + 15px);"></div>
|
||||||
<div class="range-slider-thumb" style="bottom: 45%;"></div>
|
<div class="range-slider-thumb" style="bottom: 45%;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -105,6 +300,92 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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: 320px;">
|
||||||
|
<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="volume-slider-container">
|
||||||
|
<div class="d-flex justify-content-center mt-3">
|
||||||
|
<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" step="0.1"
|
||||||
|
value="30">
|
||||||
|
<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">
|
||||||
|
<span>0</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-10</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-20</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-30</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-40</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-50</span>
|
||||||
|
<section class="mm"></section>
|
||||||
|
</section>
|
||||||
|
<section class="cm">
|
||||||
|
<span>-60</span>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="slider-value-box">
|
||||||
|
<input class="slider-value" style="width: 60px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class="music">
|
||||||
|
<div class="item one"></div>
|
||||||
|
<div class="item two"></div>
|
||||||
|
<div class="item three"></div>
|
||||||
|
<div class="item four"></div>
|
||||||
|
<div class="item five"></div>
|
||||||
|
<div class="item six"></div>
|
||||||
|
<div class="item seven"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="form">
|
<div class="form">
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -133,51 +414,8 @@
|
||||||
<button type="button" class="btn btn-dark border border-black px-5">Confirm</button>
|
<button type="button" class="btn btn-dark border border-black px-5">Confirm</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <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>
|
||||||
|
</div> -->
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="mt-auto text-white-50">
|
<footer class="mt-auto text-white-50">
|
||||||
|
|
@ -198,9 +436,9 @@
|
||||||
|
|
||||||
let parent = element.parentElement,
|
let parent = element.parentElement,
|
||||||
lastValue = parent.getAttribute('data-slider-value');
|
lastValue = parent.getAttribute('data-slider-value');
|
||||||
let container = parent.parentElement.parentElement.parentElement.parentElement;
|
let container = parent.parentElement.parentElement.parentElement.parentElement;
|
||||||
|
|
||||||
console.log(`${lastValue}===${element.value}}`)
|
console.log(`${lastValue}===${element.value}}`)
|
||||||
// if (lastValue === element.value) {
|
// if (lastValue === element.value) {
|
||||||
// return; // No value change, no need to update then
|
// return; // No value change, no need to update then
|
||||||
// }
|
// }
|
||||||
|
|
@ -209,12 +447,15 @@ console.log(`${lastValue}===${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'),
|
||||||
$value = container.querySelector('.slider-value')
|
$value = container.querySelector('.slider-value')
|
||||||
console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
|
console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
|
||||||
|
console.log(`===${((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight)}===`)
|
||||||
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)`;
|
||||||
$value.value = `${element.value-60}`;
|
$value.value = `${((element.value * (60 / 100)) - 60).toFixed(1)}dB`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
|
|
@ -235,26 +476,25 @@ console.log(`${lastValue}===${element.value}}`)
|
||||||
$("#handle1").roundSlider({
|
$("#handle1").roundSlider({
|
||||||
sliderType: "min-range",
|
sliderType: "min-range",
|
||||||
editableTooltip: false,
|
editableTooltip: false,
|
||||||
radius: 105,
|
radius: 60,
|
||||||
width: 16,
|
width: 10,
|
||||||
value: 38,
|
value: 0,
|
||||||
handleSize: 0,
|
handleSize: 0,
|
||||||
handleShape: "square",
|
handleShape: "square",
|
||||||
circleShape: "custom-half",
|
circleShape: "pie",
|
||||||
startAngle: 0,
|
startAngle: 315,
|
||||||
endAgle: 359.9
|
tooltipFormat: "changeTooltip",
|
||||||
// startAngle: 315,
|
mouseScrollAction: true
|
||||||
// tooltipFormat: "changeTooltip"
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function changeTooltip(e) {
|
function changeTooltip(e) {
|
||||||
var val = e.value, speed;
|
var val = e.value, speed;
|
||||||
if (val < 20) speed = "Slow";
|
// if (val < 20) speed = "Slow";
|
||||||
else if (val < 40) speed = "Normal";
|
// else if (val < 40) speed = "Normal";
|
||||||
else if (val < 70) speed = "Speed";
|
// else if (val < 70) speed = "Speed";
|
||||||
else speed = "Very Speed";
|
// else speed = "Very Speed";
|
||||||
|
|
||||||
return val + " km/h" + "<div>" + speed + "<div>";
|
// return val + " km/h" + "<div>" + speed + "<div>";
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue