0
135
Views¿Cómo crear una barra deslizante con 2 pulgares que se influyen mutuamente en Javascript o jQuery?
Lo siento, cuando quise hacer esta función, fue la primera vez que aprendí jQuery. He consultado muchas páginas web y dudas, pero no he podido implementarlo en los últimos días. Realmente espero que alguien pueda ayudarme!
Mi idea es crear un control deslizante con dos pulgares como el video a continuación. Cuando se mueve uno de los pulgares, el otro también cambiará (si uno es x y el otro es y , el valor ingresado por el usuario es a . Entonces la relación entre los dos puede ser y = 2a-x )
Usé los siguientes .css y jQuery para crear un control deslizante (con una gran cantidad de código inútil eliminado):
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <script> $( function() { $( "#myRange" ).slider({ range: false, min: 0, max: 200, values: [80, 120], slide: function( event, ui ) { var x = ui.values[0]; var y = ui.values[1]; } }); }); </script>y
<input type="number"/> <div id="myRange"></div> 
1 answers
Answer question0
Considera lo siguiente.
$(function() { $("#myRange").slider({ range: false, min: -200, max: 200, values: [80, -80], slide: function(event, ui) { var x, y, a = parseInt($("#a").val()); if ($(".ui-slider-handle.ui-state-focus").index() == 0) { x = ui.values[0]; y = (2 * a) - x; $(this).slider("values", 1, y); } else { y = ui.values[1]; x = (2 * a) - y; $(this).slider("values", 0, x); } $("#x-val").html(x); $("#a-val").html(a); $("#y-val").html(y); } }); }); input[type='number'] { width: 3em; } #myRange { margin: 10px; } #myRange .ui-slider-handle:nth-of-type(1) { margin-top: -10px; } #myRange .ui-slider-handle:nth-of-type(2) { margin-top: 10px; } .log span { margin-right: 0.25em; } <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <div class="ui-widget"> <div class="ui-widget-content" style="margin-bottom: 20px;"> <label for="a">Enter Number</label> <input type="number" id="a" value="0" /> </div> <div id="myRange"></div> </div> <div class="log"> <label>X:</label><span id="x-val">80</span><label>A:</label><span id="a-val">0</span><label>Y:</label><span id="y-val">120</span> </div>La parte complicada de esto es que el usuario puede agarrar cualquiera de las Manijas. Saber qué identificador tiene el Foco nos permite asignarle el valor adecuado.
Actualizar
También puedes apretarlo un poco:
$(function() { $("#myRange").slider({ range: false, min: -200, max: 200, values: [80, -80], slide: function(event, ui) { var a = parseInt($("#a").val()); if ($(".ui-slider-handle.ui-state-focus").index() == 0) { $(this).slider("values", 1, (2 * a) - ui.values[0]); } else { $(this).slider("values", 0, (2 * a) - ui.values[1]); } } }); });