Combined sliders with values shown

I am trying to render a bunch of custom sliders that show value with the slider.

This function works just fine:

function slider_value(;default = 28, min = 1, max = 100)
@htl("""<input type="range" value="$(default)" min="$(min)" max="$(max)" oninput="this.nextElementSibling.value = this.value">
<output>24</output>""")
end

and renders a slider with a value at right:

But when I try to use combine

function combined_sliders(names)
	PlutoUI.combine() do Child
		@htl("""
		<ul>
		$([
			@htl("""<li>$(name): $(Child(slider_value()))""")
			for name in names
		])
		</ul>
		""")
	end
end

the value at the right of the slider does not update anymore:

Any ideas?

Here’s the full notebook.

Edited: left → right :roll_eyes:

Do you know that you can use Slider(x; show_value = true) to achieve what you want without doing a custom html element?

1 Like

No, I did not :flushed:. That works also with combine perfectly. Thanks!
It seems that one should reread the documentation carefully and often…