Question 231561 in Html Question posted in
Some basic documentation can be found here.

Html – Rotate/Spin Object with form input & slider

I have an object called #person that I need to rotate from -180 to 180 degrees with input from a slider. I have the slider working with the input box synced up to show the current angle value and a function I attempted to write but it’s not working. I’m trying to use style.transform. Using bootstrap and jQueryUI in the project, a solution involving those two frameworks instead of standard javascript would also help.

HTML

<label for="angleSlider" class="form-label">Rotation Angle</label>
    <form>
        <input type="range" class="form-range w-75" id="thetaRange" min="-180" max="180" value="0"
        oninput="this.form.thetaInput.value=this.value" />
        <input type="number" id="thetaInput" min="-180" max="180" value="0"
        oninput="this.form.thetaRange.value=this.value" />
    </form>

Javascript

function rotatePerson() {
        const person = document.getElementById("person");
        var angle = document.getElementById("thetaRange");
        person.style.transform = "rotate(angle deg)"
    }
Tags:

2

Answers


  1. 0

    The code snippet you provided is almost correct, but there are a couple of issues in the last line of the JavaScript code. Here is the corrected version with an explanation:

    function rotatePerson() {
    const person = document.getElementById("person");
    var angle = document.getElementById("thetaRange").value; // Get the value of the angle
    person.style.transform = "rotate(" + angle + "deg)"; // Concatenate the angle variable into the transform property
}

    Explanation :

    1. The rotatePerson function selects the element with the ID "person" using getElementById and assigns it to the person variable.

    2. Next, it retrieves the value of the angle from the element with the ID "thetaRange" using getElementById and accessing the value property. This value represents the current angle selected on the slider.

    3. Finally, the code sets the style.transform property of the person element to rotate(" + angle + "deg). This dynamically applies the rotation to the person element, using the angle value in degrees obtained from the slider.

    By calling the rotatePerson function whenever the slider value changes, the person element will rotate according to the selected angle.

    Login or Signup to reply.
  2. 0

    Consider the following jQuery example.

    $(function() {
  $("#thetaRange").on("input", function() {
    var angle = $(this).val() + "deg";
    $(".angle").html(angle);
    $(".person").css("transform", "rotate(" + angle + ")");
  });
});
    .viewspace {
  width: 100%;
  height: 240px;
}

.person {
  width: 100px;
  height: 150px;
  background: #eef;
  transform: rotate(0deg)
}

.angle {
  width: 55px;
  display: inline-block;
  text-align: right;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="viewspace">
  <div class="person">
  </div>
</div>
<label for="angleSlider" class="form-label">Rotation Angle</label>
<input type="range" class="form-range w-75" id="thetaRange" min="-180" max="180" value="0" />
<span class="angle">0deg</span>

    This rotates the element based on the Value of the Range Input on input event.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search