Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Parent CSS scaling messes up the slider #367

Open
danisss9 opened this issue Jan 30, 2024 · 1 comment
Open

Parent CSS scaling messes up the slider #367

danisss9 opened this issue Jan 30, 2024 · 1 comment

Comments

@danisss9
Copy link
Contributor

Bug
A bug I stumbled into is that the slider breaks (displays wrong) if the ngx-slider element or any of it's parents contain a CSS scaling transform rule (Eg : transform : scale(N) ; ).

Steps to replicate:

  1. Create a parent to contain your slider and set the CSS rule transform:scale(2);.
  2. Add an ngx-slider as a child to that parent.
  3. Load the page and attempt to slide the slider.

Reproduction: https://codesandbox.io/s/cool-darkness-tkbp0k?file=/src/app/app.component.html

@danisss9
Copy link
Contributor Author

@mdominiak2 A workaround seems to be setting the scale option as the opposite value of the scale set in css.

Example:
image

image

The calculation of the position/dimension of the slider would need to be reworked to really fix this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant