Создание ползунка диапазона HTML5, вычисляемого в обратном порядке в Javascript
Вид вопроса новичка, но я не совсем. Просто не использовал ползунок диапазона HTML5. Вероятно, это просто какая-то простая математика, которую мой мозг в настоящее время не запускает.
У меня есть ползунок диапазона, который идет от 0 до 100, и я рассчитываю процент, чтобы обновить непрозрачность CSS для некоторых элементов.
В любом случае, я обновляю непрозрачность элементов по обе стороны от ползунка.
С левой стороны (значение 0) у меня есть элемент слева, правильно работающий с ползунком диапазона. Он получает его расчет и правильно регулирует его значения. С другой стороны, я бы хотел, чтобы правая сторона делала наоборот, и когда значение диапазона равно 100.
Я хочу, чтобы непрозрачность элемента справа была равна 0 (непрозрачность CSS: 0), когда ползунок диапазона находится в положении 100, а когда ползунок диапазона находится в положении 0, я хочу, чтобы элемент справа был равен 100% (или в CSS непрозрачность: 1,0).
Мой текущий код выглядит следующим образом. У меня также есть JSFiddle.
И да, я все еще использую jQuery, поэтому, пожалуйста, не комментируйте. Vanilla JS также подходит для использования. Я ценю помощь.
var right = $('#rightElement');
var left = $('#leftElement');
var lastNum = 0;
$(slider).on('input', function() {
var v = $(this).val();
onInput(v);
});
function onInput(value) {
if (lastNum < value) {
var parsedValue = parseInt(value);
console.info("increasing");
$(left).css('opacity', (parsedValue / 100));
console.info("increasing percentage" + (parsedValue / 100));
}
if (lastNum > value) {
var parsedValue = parseInt(value);
console.info("decreasing");
$(left).css('opacity', (parsedValue / 100));
$(right).css('opacity', (parsedValue / 100));
console.info("decreasing percentage" + (parsedValue / 100));
}
lastNum = value;
console.info("onInput: " + value);
}.opacityElement {
width: 100px;
height: 100px;
display: inline-block
}
#rightElement {
background: red
}
#leftElement {
background: blue
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "leftElement" class = "opacityElement"></div>
<div id = "rightElement" class = "opacityElement"></div>
<input type = "range" min = "0" max = "100" value = "50" id = "slider">Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Ответил на этот JSFiddle:
https://jsfiddle.net/5mf0bn1a/2/
Вот основные изменения:
var parsedValue = parseInt(value);
if (lastNum < value) {
console.info("increasing");
console.info("increasing percentage" + (parsedValue/100));
}
if (lastNum > value) {
console.info("decreasing");
console.info( "decreasing percentage" + (parsedValue/100));
}
$(left).css('opacity', (parsedValue/100));
$(right).css('opacity', 1 - (parsedValue/100));
Самый простой способ сделать это — вычесть значение из 1, когда вам нужно его инвертировать.
если значение равно 10, значение непрозрачности будет 0.10 (10/100), а наоборот 0.9, то есть 1 - 0.10 = 0.9
function onInput(value) {
var parsedValue = parseInt(value, 10);
$(left).css('opacity', (parsedValue/100));
$(right).css('opacity', (1 - (parsedValue)/100));
}
Это поможет
Чтобы оставаться сфокусированным, левый div должен следовать за значением на ползунке, а правый div должен делать противоположное.
Чтобы добиться этого, вы можете использовать простой трюк для расчета непрозрачности правильного div: opacity = 100 - значение ползунка
После этого просто умножим новое значение на 0.01 (или разделим на 100), чтобы оно попало в допустимый диапазон значений атрибута opacity.
const slider = document.getElementById('slider'),
right = document.getElementById('rightElement'),
left = document.getElementById('leftElement'),
coeff = 0.01;
slider.addEventListener('input', () => {
const v = slider.value;
left.style.opacity = v * coeff;
right.style.opacity = (100 - v) * coeff;
});.opacityElement {
width: 100px;
height: 100px;
display: inline-block
}
#rightElement {
background: red
}
#leftElement {
background: blue
}<div id = "leftElement" class = "opacityElement"></div>
<div id = "rightElement" class = "opacityElement"></div>
<input type = "range" min = "0" max = "100" value = "50" id = "slider">
@ClosDesign Добро пожаловать!