Search code examples
angularangular-materialslidermat-slider

Angular material 17 - vertical slider

I have build a responsive webapp with a slider that turns vertical on small screens. I have recently migrated to material version 17. However the new docs state the following quote:

Vertical sliders and inverted sliders are no longer supported, as they are no longer part of the Material Design spec. As a result, the invert and vertical properties have been removed.

The same webpage states that one can still import legacy code and use it (also suggested in this answer)

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

However, when I try to import the legacy slider from @angular/metarial/legacy-slider, I get a compiler error: Cannot find module. I think the reason is that legacy code is completely removed from version 17.

I have tried using css transform: rotate to solve this problem, but this does not allow smooth interaction with the slider (The slider is rendered vertically, but I cannot slide it).

Do you know how to solve this problem? I would appreciate any help.

Solution

  • You are correct, the legacy components were removed in v17. Also there is no intention from the team to implement a vertical slider (see this git issue).

    This leaves you with three options:

    • Don't use vertical slider in your project
    • Replace all your sliders to some other components that allow using vertical sliders (there seem to be plenty on npm, but recommendations of libraries is not in scope of SO questions)
    • Create your own component that suits your needs.

    There's also a temporary solution of rolling back to v16 and use the legacy component, but it's probably not sustainable in the long run, so it's probably best as a workaround until you can pick one of the three above options.