JuliaPluto / PlutoUI.jl

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

PlutoUI: Adding Plus/Minus button in Slider #154

Open MrDataPsycho opened 2 years ago

MrDataPsycho commented 2 years ago

Hi, When create a Slider using PlutoUI is it possible to has a tiny Up/Down or plus/minus button for one step increment. It is sometime annoying to use the slide button to adjust the number when I just need one or two step ahead or behind.

Thanks

chunjiw commented 2 years ago

After clicking on it, you can use left or right arrow key to increment/decrement.

MrDataPsycho commented 2 years ago

Ok. Thanks that will work too. I am closing the issue. But you might consider it to add clickable button. So that it is possible with mouse but not only with keyboard. Thanks a lot.

yha commented 2 years ago

For now you can bind the same value to a Slider and a NumberField:

let xrange = 1:10
    x_sl = @bind x Slider(xrange)
    x_nf = @bind x NumberField(xrange)
    md"""
    x: $x_sl $x_nf
    """
end

(but it's not very predictable whether they end up on the same line or not. In this example, removing the x: moves the NumberField to a separate line)

fonsp commented 2 years ago

@yha This feature is secret!! (Might break at some point)

yha commented 2 years ago

That's unfortunate. I use it quite a lot.

fonsp commented 2 years ago

The problem is that it's almost impossible to support in combination with the feature that inputs can transform their value (#148), because the frontend will synchronize their original, untransformed values.

In fact, it looks like your example is broken in the latest version of PlutoUI, because Slider became index-based, and NumberField is still using the actual numerical value:

https://user-images.githubusercontent.com/6933510/146353311-d5c4fd46-08cb-417a-b1e5-8894d22cd748.mov

it might be possible to create an official widget to achieve this, kind of like the new combine (#163), open an issue if you are interested.