search

leongersen / noUiSlider

noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
https://refreshless.com/nouislider/
MIT License
5.66k stars 659 forks source link

Run without css transform? #1134

Closed AAverin closed 3 years ago

AAverin commented 3 years ago

I am running my code in an environment that doesn't support css transitions and animations (sic!) - https://www.adobe.io/photoshop/uxp/uxp/known-issues/ Is it technically possible to run noUiSlider without them?

leongersen commented 3 years ago

Yes, you can set the animate option to false to disable animations, and disable the transition in CSS.

https://refreshless.com/nouislider/slider-options/#section-animate

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
    -webkit-transition: none;
    transition: none;
}
AAverin commented 3 years ago

Just to make it clear, no css transitions are supported at all. I saw there was a style that was transitioning away

noUI-origin: {
transform: translate( -1000%,0px);
}

This will also not work. Setting animate doesn't remove this part of styling.

leongersen commented 3 years ago

Transforms and transitions aren't the same thing, and only transitions are listed in the documentation you've linked. If transforms are also unsupported, I'm afraid you are out of luck, as noUiSlider uses those to position its handles.

AAverin commented 3 years ago

It says CSS transitions and animations are not supported.

leongersen commented 3 years ago

But not transforms.

AAverin commented 3 years ago

I will experiment around it, but so far handles do not show up.

AAverin commented 3 years ago

yep, transform is not in the list of support css properties https://www.adobe.io/photoshop/uxp/uxp/reference-css/Styles/ Guess I will have to build something custom then using tools available

leongersen commented 3 years ago

Ok, good luck.

github-actions[bot] commented 2 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.