Slidebars | jQuery Framework for Off-Canvas Menus | Frontend Framework library

When zooming in the browser, the scaleX() property is not staying consistent. TranslateX() works exactly as it should which is why I'm reaching out.

I am building out a stepped progress bar with the Web Animations API and Vanilla JS, the intention is that there will be a form inserted into this so as we step through form steps the animation/steps will show progress through it. The issue I am encountering is when I am testing for ADA compliance, specifically when zooming in on the page. And even more specifically, it's only when the zoom percentage is not a multiple of 100. So 100, 200, 300, and 400% work perfectly. But 110, 125, 250%, just to name a few, are having issues. The dot that slides across the screen is working as it should.

The unexpected behavior is in the bar that expands across the screen along with the dot, sometimes it goes too far sometimes it doesn't go far enough. The thing that is really confusing me is that both the bar and the dot are both being "controlled" by the same measurements, which is taking the parent div's width and dividing by 3 and then multiplying by the current step. This is what leads me to assuming the issue is in the scaleX transform. I am still testing this overall in IE, encountering the issue in chrome and firefox.

HTML:

So in my app, there are 2 slidebars which output a value between 1 and 100. based on the output, i want to set the margin of a div to whatever the output is in percentage. Ive tried many things and google didnt seem to have an answer to my exact problem

So in the .ts file i have a variable called "xpos" which stores the output of the slider. The following code is my attempt on solving my problem but it doesnt seem to work;

Edit : This is the console error - jquery.min.js:2 Failed to load file:///root/Documents/VS%20Code/Javascript/MockDashboard/hr.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

I am creating a dashboard using css libraries like slidebar js & bootstrap. It seems that everything is correct except that I am not able to load an html page from the off-canvas sidebar link to a canvas div. Kindly help me with my code :

I have a webpage that needs the height set because of scrolling elements on the page. But I also need to detect scrollTop() distance to add some css to the nav bar. It seems that setting the height of the body (which is the canvas in the css below because I am using slidebars.js) to 100% does not allow me to detect if the scrollTop has hit a threshold.

This is the js that I cannot get working.

I am wondering in how I should include my npm packages into my HTML. I have added "slidebars": "2.0.2" to my package.json. After that, I ran npm install. So far so good.

Now, I am new with both Laravel and npm. I am trying to use the "mix" feature provided in Laravel like this: