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!

[Nerwyn]

Note to self for possible fix to auto-height: Set outer element height to unset and align-self to stretch, then use sliderWidth to set height. This may also work with horizontal sliders.

[Nerwyn]

Vertical sliders no longer require an explicit height! I've made it so that it will be implicitly set using the height found using the resize observer. Now in the latest beta you just have to set vertical: true in the slider custom action. Slider height/width can still be set by the user and it should behave correctly whether made larger or smaller than the default values.

[Nerwyn]

Vertical sliders added in 3.8.0.