diff --git a/examples/article.html b/examples/article.html
index 81e91e8..c511104 100644
--- a/examples/article.html
+++ b/examples/article.html
@@ -42,7 +42,7 @@
 <distill-header></distill-header>
 <d-abstract>
   <figure style="grid-column: page; margin: 1rem 0;"><img src="momentum.png" style="width:100%; border: 1px solid rgba(0, 0, 0, 0.2);"/></figure>
-  <d-slider style="grid-column: page;"></d-slider>
+  <d-slider style="grid-column: page;" step="1" min="1" max="6"></d-slider>
   <d-slider style="width: 100px;"></d-slider>
   <input type="range" />
   <script>
diff --git a/src/ui/d-slider.js b/src/ui/d-slider.js
index 1f5ec24..05a6489 100644
--- a/src/ui/d-slider.js
+++ b/src/ui/d-slider.js
@@ -137,10 +137,10 @@ export class Slider extends T(HTMLElement) {
     this.background = this.root.querySelector(".background");
     this.trackFill = this.root.querySelector(".track-fill");
     this.track = this.root.querySelector(".track");
-    this.min = this.hasAttribute("min") ? this.getAttribute("min") : 0;
-    this.max = this.hasAttribute("max") ? this.getAttribute("max") : 100;
-    this.value = this.hasAttribute("value") ? this.getAttribute("value") : 0;
-    this.step = this.hasAttribute("step") ? this.getAttribute("step") : 1;
+    this.min = this.hasAttribute("min") ? +this.getAttribute("min") : 0;
+    this.max = this.hasAttribute("max") ? +this.getAttribute("max") : 100;
+    this.value = this.hasAttribute("value") ? +this.getAttribute("value") : 0;
+    this.step = this.hasAttribute("step") ? +this.getAttribute("step") : 1;
     this.scale = scaleLinear().domain([this.min, this.max]).range([0, 1]).clamp(true);
     this.drag = drag()
       .container(this.track)
@@ -201,7 +201,6 @@ export class Slider extends T(HTMLElement) {
           break;
       }
       if (stopPropagation) {
-        this.background.classList.add("focus");
         e.preventDefault();
         e.stopPropagation();
       }