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

Slider doesn't work properly when parent container is rotated #677

Open
kfmorton opened this issue Dec 16, 2020 · 5 comments
Open

Slider doesn't work properly when parent container is rotated #677

kfmorton opened this issue Dec 16, 2020 · 5 comments

Comments

@kfmorton
Copy link

Describe the bug
When the slider is embedded in a container (div) and the div is rotated 90 deg using CSS "transform: rotate(90deg);" the slider doesn't work. The behavior is broken, where it doesn't slide or move at all, and the labels are not aligned properly.

To Reproduce
Steps to reproduce the behavior:

  1. Put the ng-slider in a div
  2. Rotate the div using css 90 deg
  3. The slider doesn't work, see issue

Expected behavior
The slider is supposed to work as normal

Screenshots

image

CSS
.availability-edit-container {
-webkit-transform: rotate(90deg); /* Safari and Chrome /
-moz-transform: rotate(90deg); /
Firefox /
-ms-transform: rotate(90deg); /
IE 9 /
-o-transform: rotate(90deg); /
Opera */
transform: rotate(90deg);
}

HTML

options are: draggableRange: true

@ValentinH
Copy link
Member

It's been a while since I worked on this library. However, if I recall correctly, mouse events are not taking any transformations into account. There was the same issue with using transform: scale(2) and that's why the scale option was created.

I think that something similar should be done for your use case.

@kfmorton
Copy link
Author

Thanks for your response. I did see the scale property solution when using transform: scale(2). But, the slider's behavior is incorrect before mouse interaction/events. It's almost like the slider's controls or settings are not updating after the css rotation, because the slider attempts to slide in the incorrect opposite direction. I have tried all slider options but nothing seems to work.

@ValentinH
Copy link
Member

This is because a new option would be required to tell the slider it is rotated so that the internal logic takes it into account.
Such an option doesn't exist at the moment. If you want, you can try to work on a PR though.

@kfmorton
Copy link
Author

I don't mind if you provide a little direction on what needs to be done. Also, I just noticed I reported this issue in "angularjs-slider", should I move it to "ngx-slider"

@ValentinH
Copy link
Member

It depends which library you are using. If it's the Angular one, yes this is not the right issue board 🙂

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

2 participants