alignment problem while customizing the <input type="range" /> element
i have a floating anchor div above the input element, which should move aline with the thumb. But its moving slightly back of thumb after 1st half of range and slightly front on 2nd half of range. I have a video link and a GitHub project link below. Please, someone kindly help me with is issue.
videoLink - https://www.loom.com/share/c96d4f861a7245c48ef588047480f173?sid=6983b73e-7105-42db-9b05-fdf7e72ea6a6
project link-https://github.com/waran2337/vidyo-pricing-page
GitHub
GitHub - waran2337/vidyo-pricing-page: pricing-page
pricing-page. Contribute to waran2337/vidyo-pricing-page development by creating an account on GitHub.
4 Replies
Hi
This is actually trickier than it should be.
You need to allow for the width of the thumb as this itself has an offset, either negative or positive either side of 50%.
The issue is getting the width of the thumb so as to be able to contemplate this in your calculations. Whilst this is possible in Chromium browsers, as far as I can tell this is quite hard to do in Firefox.
One solution is to restyle the slider in CSS and define the width of the thumb yourself. You can then use that width in your JavaScript to calculate the offset.
🙏Thank you for replying. I am currently out of station. I will try this solution and let u know, onces I reach my laptop ..
If incase u have solved these. Please kindly share the edited code.
I have put this together but it does not use Tailwind (it should be easy enough to transfer to Tailwind) nor is it within a React component - ie it is with vanilla JS.
https://codepen.io/cbolson/pen/qBGWQNz