Slider doesn't work properly when parent container is rotated

[kfmorton]

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

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]

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]

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]

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]

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]

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