search

JuliaPluto / PlutoUI.jl

https://featured.plutojl.org/basic/plutoui.jl
The Unlicense
299 stars 54 forks source link

Vertical Slider #298

Open scls19fr opened 4 months ago

scls19fr commented 4 months ago

Hello,

Following https://github.com/fonsp/Pluto.jl/issues/2827

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

Following your comment https://github.com/fonsp/Pluto.jl/issues/2827#issuecomment-1966593467 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 commented 4 months ago

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

image

Until then you could use the html element directly:

@bind x html"<input style="writing-mode: vertical-rl" type=range min=5 max=25>"
scls19fr commented 4 months ago 
@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

scls19fr commented 3 months ago

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

image

aplavin commented 1 month ago

See also – fully generic slider styling in PlutoUIExtra.jl (+PR here in PlutoUI.jl https://github.com/JuliaPluto/PlutoUI.jl/pull/258). Works for vertical and whatever else you might want: image