[BUG] Sliders not in Sync With Text In Pendulum Simulation

[JiyaGupta-cs]

Description

The text labels of the sliders are not with the sliders because the function position() used in this code to place the slider works differently with the text() function

Proposed Solution-

=> We can't do it by CSS.
=> It can be done by making the both the things work by using the same function using P5.JS
=> Moreover, we could not change the position values in slider.position(width, height); manually because the top and left (x,y) indexes would vary with each mobile device
=> Therefore I fixed the issue using a different approach.

Screenshots

Desktop View -

Mobile View -

Any additional information?

No response

What browser are you seeing the problem on?

No response

Checklist

• I have starred the repository
• I have checked the existing issues
• I have read the discussion tab thoroughly and got the project idea
• I am willing to work on this issue (optional)
• I am a SWOC'24 contributor
• I am an IWOC 2.0 contributor

[github-actions]

Congratulations, @JiyaGupta-cs! 🎉 Thank you for creating your issue for Virtuo-Learn. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work! Should you have any queries or require guidance, do not hesitate to ask.

[JiyaGupta-cs]

@JAYESHBATRA Please assign me this issue under IWOC

[JiyaGupta-cs]

@JAYESHBATRA Please see the PR