How can i move one step at a time with PlutoUI's Slider?

Tooling Pluto
1

I use PlutoUI’s Slider to observe my experiment log, total length is more than thousands, and want to watch the dynamics of each step one at a time. I used to use arrow keys after clicked the slider, everything was good.
But right now, maybe after some version update, one click of arrow key would move the step by N, so the same for mousemove, and i cannot find any settings to make it one at a time.

How can i move one step at a time in PlutoUI’s Slider? This function is very neccessary.

2 Likes
2

I quickly tried with the latest version of Pluto and PlutoUI, and for me it seems like one click of the arrow is one step in the value range i provided.

Could you maybe provide an MWE, i.e. what minimal notebook would do this for you and what versions of things do you then have?

3

I wrote my own slider type for something very similar before, might be helpful:

begin
	using HypertextLiteral, AbstractPlutoDingetjes.Bonds
	struct SeekingSlider
		r::UnitRange{Int}
	end
	function Base.show(io::IO, ::MIME"text/html", (; r)::SeekingSlider)
		print(io, @htl("""
		<span>
		<input $((id="f", type="button", value="<<"))/>
		<input $((id="m", type="button", value="<"))/>
		<input $((id="s", type="range", min=r.start, max=r.stop))/>
		<input $((id="p", type="button", value=">"))/>
		<input $((id="l", type="button", value=">>"))/>
		<span id="t" style="margin-left: 1em">$(r.start)</span>
		
		<script>
		const span = currentScript.parentElement
		const slider = span.querySelector("#s")

		function get() {
			return slider.value
		}
		function set(val){
		    val = Math.min(Math.max(val, $(r.start)), $(r.stop));
			slider.value = val
			span.querySelector("#t").textContent = val
			span.value = val
			span.dispatchEvent(new CustomEvent("input"))
		}

		span.querySelector("#f").onclick = () => set($(r.start))
		span.querySelector("#l").onclick = () => set($(r.stop))
		span.querySelector("#m").onclick = () => set(+get() - 1)
		span.querySelector("#p").onclick = () => set(+get() + 1)
		slider.oninput = () => set(get())
		set($(r.start))
		</script>
		</span>
		"""))
	end
	Base.get((; r)::SeekingSlider) = r.start
	Bonds.initial_value((; r)::SeekingSlider) = r.start
	Bonds.possible_values((; r)::SeekingSlider) = r
end

You can use it pretty much just like slider, so @bind i SeekingSlider(3:8) for example.

2 Likes
4

try some big number:
for example this would do 10 at a time for me:
@bind test_num Slider(1:10000, show_value=true)

1 Like