yxw
/
AudioHTML
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

refix

main
yxw 2023-10-31 19:06:14 +08:00
parent 3b04680856
commit 0ed8578625
2 changed files with 84 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
css/app.css
View File

@ -528,12 +528,31 @@ body {
background-image: url(../images/button.png);
}
.slider-value{
border: none;
background: #000;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
color: #fff;
border-radius: 5px;
}
.slider-value:focus{
border: none;
background: #000;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
color: #fff;
border-radius: 5px;
outline: none;
}
.volume-ruler {
position: relative;
width: 14px;
height: 300px;
height: 250px;
margin-top: 20px;
margin-bottom: 20px;
}
.volume-ruler .cm {
@ -565,56 +584,40 @@ body {
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";
.volume-ruler .cm>span{
position: absolute;
right: -25px;
top: -7px;
font: 11px/1 sans-serif;
color: #555;
}

36
volume.html
View File

@ -38,7 +38,7 @@
<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 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">
@ -51,11 +51,12 @@
<label class="btn" for="option6">OFF</label>
</div>
</div>
<div class="d-flex justify-content-center mt-3" style="height: 350px;">
<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" value="50">
<input type="range" orient="vertical" min="0" max="60" 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>
@ -63,30 +64,42 @@
<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: 50px;" />
</div>
</div>
</div>
</div>
@ -182,21 +195,26 @@
function updateSlider(element) {
if (element) {
let parent = element.parentElement,
lastValue = parent.getAttribute('data-slider-value');
let container = parent.parentElement.parentElement.parentElement.parentElement;
if (lastValue === element.value) {
return; // No value change, no need to update then
}
console.log(`${lastValue}===${element.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'),
$value = container.querySelector('.slider-value')
console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
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}%`;
$value.value = `${element.value-60}`;
}
}
return {
@ -206,7 +224,7 @@
})();
(function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.volume-slider input'));
const inputs = [].slice.call(document.querySelectorAll('.volume-slider-container .volume-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.