Vertical Slider

[s-celles]

Hello,

Following fonsp/Pluto.jl#2827

For some notebooks it could make sense to have a vertical Slider

Following your comment fonsp/Pluto.jl#2827 (comment) I tried

html"""
<div>
    <input style="writing-mode: vertical-rl" type=range>
</div>
"""

but haven't been able to bind the value to the slider

Kind regards

[fonsp]

Maybe this can be implemented with writing-mode. Need to take care that the show_value still works properly.

Until then you could use the html element directly:

@bind x html"<input style="writing-mode: vertical-rl" type=range min=5 max=25>"

[s-celles]

@bind V1 html"""<input style="writing-mode: vertical-rl" type=range min=0 max=1 step=0.1 default=1>"""

is a good workaround (with triple quote)

Thanks @fonsp

[s-celles]

On the other side... doing something like

begin
	ui_V1 = @bind V1 html"""<input style="writing-mode: vertical-rl" type=range min=0 max=1 step=0.1 default=1>"""
	md"""$(V1) $(ui_V1)"""
end

returns missing

[aplavin]

See also – fully generic slider styling in PlutoUIExtra.jl (+PR here in PlutoUI.jl #258).
Works for vertical and whatever else you might want: