ngx-slider icon indicating copy to clipboard operation
ngx-slider copied to clipboard

Parent CSS scaling messes up the slider

Open danisss9 opened this issue 1 year ago • 1 comments

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 avatar Jan 30 '24 10:01 danisss9

@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.

danisss9 avatar Jan 30 '24 10:01 danisss9