PlutoUI.jl icon indicating copy to clipboard operation
PlutoUI.jl copied to clipboard

PlutoUI: Adding Plus/Minus button in Slider

Open MrDataPsycho opened this issue 3 years ago • 6 comments

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

MrDataPsycho avatar Nov 06 '21 11:11 MrDataPsycho

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

chunjiw avatar Nov 12 '21 06:11 chunjiw

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.

MrDataPsycho avatar Nov 12 '21 13:11 MrDataPsycho

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)

yha avatar Nov 29 '21 22:11 yha

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

fonsp avatar Dec 15 '21 09:12 fonsp

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

yha avatar Dec 15 '21 21:12 yha

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.

fonsp avatar Dec 16 '21 10:12 fonsp