Quiero usar Input[type=range] para rotar el círculo rojo con la identificación de exterior, traté de seleccionar el estilo del círculo, luego transformé, y eso es igual al valor de la entrada, pero tiene que estar entre el paréntesis en rotateZ() , que es una cadena. Aquí está mi código;
var value = document.getElementById("slider").value; console.log(value); document.getElementById("inner").style.transform = document.getElementById("slider").value; body { display:flex; align-items:center; justify-content:center; } #outer { background:red; height:20vw; position:relative; border-radius:50%; width:20vw; display:flex; justify-content:center; } #inner { transform:translateY(10%); border-bottom-left-radius:100%; border-bottom-right-radius:100%; position:absolute; bottom:0; background:darkgreen; width:10%; height:50%; } <div id="outer"><div id="inner"></div></div> <input min="0" max="360" type="range" id="slider">Pero no funciona. Necesito de alguna manera poner el valor entre paréntesis.
EDITAR, SOLUCIÓN;
Usé literales templados y puse la variable entre y {} como esta {variable} dentro de los paréntesis de rotación.
Dos cosas, en primer lugar, como dijiste, no puedes simplemente configurarlo en un número, sino que debes configurarlo en una cadena, aquí usando un literal de plantilla . En segundo lugar, dado que desea que la rotación esté vinculada al control deslizante, deberá agregar un oyente al control deslizante, en este caso, escuchar un input event que brinde la retroalimentación más inmediata.
var slider = document.getElementById("slider"); slider.addEventListener('input', () => { document.getElementById("outer").style.transform = `rotate(${slider.value}deg)`; }); body { display:flex; align-items:center; justify-content:center; } #outer { background:red; height:20vw; position:relative; border-radius:50%; width:20vw; display:flex; justify-content:center; } #inner { transform:translateY(10%); border-bottom-left-radius:100%; border-bottom-right-radius:100%; position:absolute; bottom:0; background:darkgreen; width:10%; height:50%; } <div id="outer"> <div id="inner"> </div> </div> <input min="0" max="360" type="range" id="slider">Debe proporcionar una cadena que se ajuste a la propiedad de CSS, como rotateZ(180deg) . Tenga cuidado con la unidad de deg , porque no funcionará sin una.
Si desea traducir la mano al mismo tiempo, también debe poner eso en la cadena, ya que solo hay una propiedad de transformación y la sobrescribirá. El orden es importante aquí: primero gire, luego traslade, o el resultado cambiará. No olvide que también debe mover el transform-origin (ver ejemplo).
Agregue un oyente al evento de entrada del control deslizante; de lo contrario, el valor solo se aplicará una vez cuando se cargue el script. Utilice mejor los literales de plantilla con acentos graves ( `rotateZ(${value}) translate(10%)` ) ya que es más conveniente, pero también puede agregar las cadenas juntas ( 'rotateZ(' + value + 'deg) translate(10%)' ).
Editar: O simplemente puede rotar el círculo exterior como en la otra respuesta, lo que le ahorra tener en cuenta la translate . Sin embargo, si también desea agregar algo como los números de un reloj al círculo, también se rotarán en ese caso.
var slider = document.getElementById("slider"), hand = document.getElementById("inner"); slider.addEventListener('input', function() { hand.style.transform = `rotateZ(${this.value}deg) translateY(10%)`; }); body { display:flex; align-items:center; justify-content:center; } #outer { background:red; height:20vw; position:relative; border-radius:50%; width:20vw; display:flex; justify-content:center; } #inner { transform: rotateZ(180deg) translateY(10%); transform-origin: top center; border-bottom-left-radius:100%; border-bottom-right-radius:100%; position:absolute; bottom:0; background:darkgreen; width:10%; height:50%; } <div id="outer"><div id="inner"></div></div> <input min="0" max="360" type="range" id="slider"> const inputValue = document.querySelector('#slider') const inner = document.querySelector('.inner') const rotate = document.querySelector('.rotate') var root = document.querySelector(':root'); let oldVariable = 0 // Listen to any change in the progress bar inputValue.addEventListener("change", function(){ const newVariable = inputValue.value root.style.setProperty('--my-start-deg',`${oldVariable}deg`); root.style.setProperty('--my-end-deg', `${newVariable}deg`); inner.classList.remove("rotate"); // Reset CSS Keyframes void inner.offsetWidth; inner.classList.add("rotate"); oldVariable = inputValue.value; }); :root { --my-start-deg: 0deg; --my-end-deg: 0deg; } #frame{ position: relative; height: 200px; width: 200px; margin: 100px; padding: 10px; border:10px solid #000; border-radius:100%; top:50%; left:50%; transform:translate(-50%); transiton:all 3s; } .inner{ position: absolute; top:50%; left:50%; transform:translate(-50%); height:100px; width:2px; border-radius:50%; background-color: red; } .rotate { transform: rotate(0deg); transform-origin: 0% 0%; animation: progressBar 3s; animation-fill-mode:forwards; transiton:all 3s; } @keyframes progressBar { 0% { transform: rotate(var(--my-start-deg)); } 100% { transform: rotate(var(--my-end-deg)); } } <input min="0" max="360" value="0" type="range" id="slider"> <div id="frame"> <div class="inner rotate"></div> </div>