diff --git a/Project.toml b/Project.toml
index 38b4e7cd..1de6a95f 100644
--- a/Project.toml
+++ b/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"
diff --git a/src/Builtins.jl b/src/Builtins.jl
index 817e2cdc..f898f21d 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -19,21 +19,39 @@ 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
+Slider(range::AbstractRange; default=first(range), show_value=false) = Slider(range, default, show_value)
+
+function show(io::IO, mimetype::MIME"text/html", slider::Slider)
+    range, default, show_value = slider.range, slider.default, slider.show_value
+    show(io, mimetype, @htl("""
+    <span>
+        <input type="range" min="$(first(range))" max="$(last(range))" step="$(step(range))" value="$(default)">
+        $(HTML(show_value ? "<output>$(default)</output>" : ""))
+        
+        <script>
+            let parentnode = currentScript.parentElement
+            let slider = parentnode.querySelector("input")
+        
+            slider.addEventListener("input", e => {
+                parentnode.value = slider.valueAsNumber
+                $(JavaScript(show_value ? "parentnode.querySelector(\"output\").value = slider.valueAsNumber" : ""))
+                parentnode.dispatchEvent(new CustomEvent("input"))
+                e.preventDefault()
+            })
+        
+            parentnode.value = $(default)
+            let localVal = parentnode.value
+            Object.defineProperty(parentnode, "value",
+                {configurable: false,
+                enumerable: false,
+                get: () => {return localVal},
+                set: (newVal) => {
+                    slider.value = newVal
+                    $(JavaScript(show_value ? "parentnode.querySelector(\"output\").value = +newVal" : ""))
+                    localVal = newVal
+                }})
+        </script>
+    </span>"""))
 end
 
 get(slider::Slider) = slider.default
diff --git a/src/PlutoUI.jl b/src/PlutoUI.jl
index 135086cb..251718f6 100644
--- a/src/PlutoUI.jl
+++ b/src/PlutoUI.jl
@@ -2,6 +2,7 @@ module PlutoUI
 
 import Base: show, get
 import Markdown: htmlesc, withtag
+import HypertextLiteral: @htl, JavaScript
 
 using Reexport