refix
parent
3b04680856
commit
0ed8578625
51
css/app.css
51
css/app.css
|
@ -528,12 +528,31 @@ body {
|
||||||
background-image: url(../images/button.png);
|
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 {
|
.volume-ruler {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 300px;
|
height: 250px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volume-ruler .cm {
|
.volume-ruler .cm {
|
||||||
|
@ -565,56 +584,40 @@ body {
|
||||||
top: 0%;
|
top: 0%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volume-ruler .cm:nth-of-type(1):after {
|
|
||||||
content: "0";
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-ruler .cm:nth-of-type(2) {
|
.volume-ruler .cm:nth-of-type(2) {
|
||||||
top: 16.6666%;
|
top: 16.6666%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volume-ruler .cm:nth-of-type(2):after {
|
|
||||||
content: "1";
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-ruler .cm:nth-of-type(3) {
|
.volume-ruler .cm:nth-of-type(3) {
|
||||||
top: 33.3333%;
|
top: 33.3333%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volume-ruler .cm:nth-of-type(3):after {
|
|
||||||
content: "2";
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-ruler .cm:nth-of-type(4) {
|
.volume-ruler .cm:nth-of-type(4) {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volume-ruler .cm:nth-of-type(4):after {
|
|
||||||
content: "3";
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-ruler .cm:nth-of-type(5) {
|
.volume-ruler .cm:nth-of-type(5) {
|
||||||
top: 66.6666%;
|
top: 66.6666%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volume-ruler .cm:nth-of-type(5):after {
|
|
||||||
content: "4";
|
|
||||||
}
|
|
||||||
|
|
||||||
.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(6):after {
|
|
||||||
content: "5";
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-ruler .cm:nth-of-type(7) {
|
.volume-ruler .cm:nth-of-type(7) {
|
||||||
top: 100%;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
92
volume.html
92
volume.html
|
@ -38,7 +38,7 @@
|
||||||
<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: 350px;">
|
<div style="width: 320px;">
|
||||||
<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">
|
||||||
|
@ -51,42 +51,55 @@
|
||||||
<label class="btn" for="option6">OFF</label>
|
<label class="btn" for="option6">OFF</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex justify-content-center mt-3" style="height: 350px;">
|
<div class="volume-slider-container">
|
||||||
<div class="d-flex">
|
<div class="d-flex justify-content-center mt-3">
|
||||||
<div class="volume-slider-box">
|
<div class="d-flex">
|
||||||
<div class="volume-slider" data-slider-value="50">
|
<div class="volume-slider-box">
|
||||||
<input type="range" orient="vertical" min="0" max="100" value="50">
|
<div class="volume-slider" data-slider-value="50">
|
||||||
<div class="range-slider-bar" style="height: calc(45% + 15px);"></div>
|
<input type="range" orient="vertical" min="0" max="60" step="0.1" value="30">
|
||||||
<div class="range-slider-thumb" style="bottom: 45%;"></div>
|
<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>
|
||||||
<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 class="slider-value-box">
|
||||||
|
<input class="slider-value" style="width: 50px;" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -182,21 +195,26 @@
|
||||||
|
|
||||||
function updateSlider(element) {
|
function updateSlider(element) {
|
||||||
if (element) {
|
if (element) {
|
||||||
|
|
||||||
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;
|
||||||
|
|
||||||
if (lastValue === element.value) {
|
console.log(`${lastValue}===${element.value}}`)
|
||||||
return; // No value change, no need to update then
|
// if (lastValue === element.value) {
|
||||||
}
|
// return; // No value change, no need to update then
|
||||||
|
// }
|
||||||
|
|
||||||
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);
|
$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}%`;
|
$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}%`;
|
$value.value = `${element.value-60}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
|
@ -206,7 +224,7 @@
|
||||||
})();
|
})();
|
||||||
|
|
||||||
(function initAndSetupTheSliders() {
|
(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 => 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