Una especie de pregunta nueva, pero en realidad no lo soy. Simplemente no he usado mucho el control deslizante de rango HTML5. Probablemente solo algunas matemáticas simples que mi cerebro actualmente no está activando.
Tengo un control deslizante de rango que va de 0 a 100 y estoy calculando el porcentaje para poder actualizar la opacidad de CSS en algunos elementos.
De todos modos, estoy actualizando la opacidad de los elementos a ambos lados del control deslizante.
En el lado izquierdo (valor 0) tengo el elemento de la izquierda funcionando correctamente con el control deslizante de rango. Obtiene su cálculo y ajusta adecuadamente sus valores. Por otro lado, me gustaría que el lado derecho hiciera lo contrario y cuando el valor del rango esté en 100. Quiero que la opacidad del elemento de la derecha sea 0 (opacidad CSS: 0) cuando el control deslizante de rango esté en 100 y cuando el control deslizante de rango está en 0, quiero que el elemento de la derecha esté al 100% (o en opacidad CSS: 1.0).
Mi código actual es el siguiente. También tengo un JSFiddle .
Y sí, todavía estoy usando jQuery, así que ahórrese los comentarios. Vanilla JS también está bien para usar. Agradezco la ayuda.
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.log("increasing"); $(left).css('opacity', (parsedValue / 100)); console.log("increasing percentage" + (parsedValue / 100)); } if (lastNum > value) { var parsedValue = parseInt(value); console.log("decreasing"); $(left).css('opacity', (parsedValue / 100)); $(right).css('opacity', (parsedValue / 100)); console.log("decreasing percentage" + (parsedValue / 100)); } lastNum = value; console.log("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">Gracias
Respondido en este JSFiddle:
https://jsfiddle.net/5mf0bn1a/2/
Aquí están los cambios clave:
var parsedValue = parseInt(value); if(lastNum < value) { console.log("increasing"); console.log("increasing percentage" + (parsedValue/100)); } if(lastNum > value) { console.log("decreasing"); console.log( "decreasing percentage" + (parsedValue/100)); } $(left).css('opacity', (parsedValue/100)); $(right).css('opacity', 1 - (parsedValue/100));La forma más fácil de hacer esto es restar el valor de 1 cuando necesite invertirlo
si el valor es 10 , el valor de opacidad sería 0.10 (10/100) y el opuesto es 0.9 , eso es 1 - 0.10 = 0.9
function onInput(value) { var parsedValue = parseInt(value, 10); $(left).css('opacity', (parsedValue/100)); $(right).css('opacity', (1 - (parsedValue)/100)); }Eso hará el truco
Para mantenerse enfocado, el div izquierdo debe seguir el valor del control deslizante, pero el div derecho debe hacer lo contrario.
Para lograr esto, puede usar un truco simple para calcular la opacidad del div correcto: opacidad = 100 - el valor del control deslizante
Después de eso, simplemente multiplicaremos el nuevo valor por 0.01 (o lo dividiremos por 100) para contenerlo en el rango de valores aceptado del atributo de 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">