New Sliders!

Project.toml

@@ -6,6 +6,7 @@ version = "0.7.9"
 [deps]
 Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
+HypertextLiteral = "ac1192a8-f4b3-4bfe-ba22-af5b92cd3ab2"
 InteractiveUtils = "b77e0a4c-d291-57a0-90e8-8db25a27a240"
 JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
 Logging = "56ddb016-857b-54e1-b83d-db4d58db5568"
@@ -15,10 +16,11 @@ Reexport = "189a3867-3050-52da-a836-e630ba90ab69"
 Suppressor = "fd094767-a336-5f1f-9728-57cf17d0bbfb"
 
 [compat]
+JSON = "^0.21.1"
 Reexport = "^1"
 Suppressor = "^0.2.0"
 julia = "^1"
-JSON = "^0.21.1"
+HypertextLiteral = "^0.7"
 
 [extras]
 Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"

src/Builtins.jl

@@ -3,12 +3,6 @@ import Dates
 
 export Slider, NumberField, Button, CheckBox, TextField, PasswordField, Select, MultiSelect, Radio, FilePicker, DateField, TimeField, ColorStringPicker
 
-struct Slider
-    range::AbstractRange
-    default::Number
-    show_value::Bool
-end
-
 """A Slider on the given `range`.
 
 ## Examples
@@ -19,24 +13,36 @@ end
 `@bind x Slider(1:10; default=8, show_value=true)`
 
 """
-Slider(range::AbstractRange; default=missing, show_value=false) = Slider(range, (default === missing) ? first(range) : default, show_value)
-
-function show(io::IO, ::MIME"text/html", slider::Slider)
-    print(io, """<input 
-        type="range" 
-        min="$(first(slider.range))" 
-        step="$(step(slider.range))" 
-        max="$(last(slider.range))" 
-        value="$(slider.default)"
-        $(slider.show_value ? "oninput=\"this.nextElementSibling.value=this.value\"" : "")
-        >""")
-
-    if slider.show_value
-        print(io, """<output>$(slider.default)</output>""")
-    end
-end
-
-get(slider::Slider) = slider.default
+Slider(range::AbstractRange; default=first(range), show_value=false) = @htl("""
+<div>
+	<input type="range" min="$(first(range))" max="$(last(range))" step="$(step(range))" value="$(default)">
+	$(HTML(show_value ? "<output>$(default)</output>" : ""))
+
+	<script>
+		let div = currentScript.parentElement
+		let slider = div.querySelector("input")
+
+		slider.addEventListener("input", e => {
+			div.value = +slider.value
+			$(JavaScript(show_value ? "div.querySelector(\"output\").value = +slider.value" : ""))
+			div.dispatchEvent(new CustomEvent("input"))
+			e.preventDefault()
+		})
+
+		div.value = $(default)
+		let localVal = div.value
+		delete div.value
+		Object.defineProperty(div, "value",
+			{configurable: false,
+    			enumerable: false,
+			get: () => {return localVal},
+			set: (newVal) => {
+				slider.value = newVal
+				$(JavaScript(show_value ? "div.querySelector(\"output\").value = +newVal" : ""))
+				localVal = newVal
+			}})
+	</script>
+</div>""")
 
 """A box where you can type in a number, within a specific range.
 

src/PlutoUI.jl

@@ -2,6 +2,7 @@ module PlutoUI
 
 import Base: show, get
 import Markdown: htmlesc, withtag
+import HypertextLiteral: @htl, JavaScript
 
 using Reexport