ngx-slider
ngx-slider copied to clipboard
Parent CSS scaling messes up the slider
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:
- Create a parent to contain your slider and set the CSS rule transform:scale(2);.
- Add an ngx-slider as a child to that parent.
- Load the page and attempt to slide the slider.
Reproduction: https://codesandbox.io/s/cool-darkness-tkbp0k?file=/src/app/app.component.html
@mdominiak2 A workaround seems to be setting the scale option as the opposite value of the scale set in css.
Example:
The calculation of the position/dimension of the slider would need to be reworked to really fix this.