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

**URL:** <https://discourse.julialang.org/t/how-can-i-move-one-step-at-a-time-with-plutouis-slider/96189>\
**Category:** Pluto\
**Tags:** plutoui\
**Created:** [March 16, 2023, 2:45pm UTC](https://discourse.julialang.org/t/how-can-i-move-one-step-at-a-time-with-plutouis-slider/96189 "2023-03-16T14:45:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ChunXi\_Zhang](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/chunxi_zhang/32/22556_2.png) [@ChunXi\_Zhang](https://discourse.julialang.org/u/ChunXi_Zhang)\
**Post date:** [March 16, 2023, 2:45pm UTC](https://discourse.julialang.org/t/how-can-i-move-one-step-at-a-time-with-plutouis-slider/96189/1 "2023-03-16T14:45:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![albheim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/albheim/32/34660_2.png) [@albheim](https://discourse.julialang.org/u/albheim)\
**Post date:** [March 16, 2023, 3:18pm UTC](https://discourse.julialang.org/t/how-can-i-move-one-step-at-a-time-with-plutouis-slider/96189/2 "2023-03-16T15:18:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![simeonschaub](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/simeonschaub/32/216566_2.png) [@simeonschaub](https://discourse.julialang.org/u/simeonschaub)\
**Post date:** [March 16, 2023, 3:29pm UTC](https://discourse.julialang.org/t/how-can-i-move-one-step-at-a-time-with-plutouis-slider/96189/3 "2023-03-16T15:29:11Z")

</div>

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

```julia
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.

---

<div class="post-metadata">

**Author:** ![ChunXi\_Zhang](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/chunxi_zhang/32/22556_2.png) [@ChunXi\_Zhang](https://discourse.julialang.org/u/ChunXi_Zhang)\
**Post date:** [March 16, 2023, 4:59pm UTC](https://discourse.julialang.org/t/how-can-i-move-one-step-at-a-time-with-plutouis-slider/96189/4 "2023-03-16T16:59:15Z")

</div>

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