Vertical Sliders

[Nerwyn]

Is your feature request related to a problem? Please describe.

• Need to copy over code for slider thumb options from service-call-tile-feature since styling it yourself is a massive pain.
• Need to figure out a way to gracefully support vertical sliders.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[SteeledKnight]

Is there a way to make the slider vertical or is this planned to be implemented?

[Nerwyn]

Not yet. I'm hoping to make it possible using CSS transform: rotate(270deg) but the shadow roots Lit elements create make it tricky. I think there's some kind of bug causing elements in the shadow root to transform twice.

[Nerwyn]

In #63 I made it so that all rows and columns now have unique IDs for card-mod styling. By encapsulating the slider in it's own column and using a mix of card-mod and internal style options I was able to make a vertical slider! But if you try to do more than a small change using the slider swipe detection gets triggered, unless you press and hold until the slider animation completes. In the future I still want to add easier to make vertical sliders but this should work as a temporary solution.

custom_actions:
  slider:
    style:
      transform: rotate(270deg);
      min-width: var(--slider-height);
card_mod:
  style:
    .: |
      #column-1 {
        min-width: 50px;
        min-height: var(--slider-height);

        --slider-height: 150px;
      }
      remote-slider {
        min-height: var(--slider-height);
      }

[Nerwyn]

In version 3.8.0 (currently in development), vertical sliders can be toggled using a new vertical field in slider custom actions. I wasn't able to get the slider height to auto extend to the height of it's parent flexbox but it can be set explicitly using style.height. No more card-mod styling needed either!

custom_actions:
  slider:
    vertical: true
    style:
      height: 200px

[Nerwyn]

Notes to self:

• https://stackoverflow.com/questions/15935837/how-to-display-a-range-input-slider-vertically
• https://dev.to/rashidshamloo/styling-input-range-sliders-nge

[Nerwyn]

Vertical sliders working correctly in 3.8.0 beta!