vertical sliders

[voshond]

Hi @danielstern!

love your tool and helped me greatly on my current project.

However for the app i'm building i discovered that on android i have a little issue, when my slider is set to be vertical.

writing-mode: bt-lr; -webkit-appearance: slider-verticalt;

is the css i used to make it vertical, however then your css doesnt work anymore as it seems to overwrite the appearance.

I used a weird, hacky way with transform to rotate the slider, but ran into issues with the transform origin and the sizes and had to make the position absolute for now. However i'd like to revert the absolute positioning and set the height and width to their actual values, so other elements see them as such.

could you have a look?

[carmacleod]

@voshond Did you take a look at Ana Tudor's collection of styled range inputs?
There are several vertical scrollbars in there. They use rotate(-90deg) for "min at the bottom, max at the top", (or they could use rotate(90deg) if the min is at the top and max at the bottom). It seems you may need to think about translation, making sure height/width are correct, styling the thumb appropriately, etc.

For example, here's a vertical range input: https://codepen.io/thebabydino/pen/RNYrJM (this one uses position: absolute;)
and here's another: https://codepen.io/thebabydino/pen/myGdxO (this one doesn't use position: absolute;)

@danielstern It would be great if you could add a couple of examples of vertical sliders! :)
Maybe one that increases the value as you move the thumb down, and another that increases as you move the thumb up.

[danielstern]

Not able to personally implement this at this time, feel free to submit a pull request.