Slider bar width and knob size increases (#170)

pshihn · web-flow · commit 8cab1fdf3ac7 · 2021-04-26T13:22:13.000-07:00
* increase slider width

* slider knob size
diff --git a/examples/slider.html b/examples/slider.html
@@ -12,7 +12,7 @@
     }
 
     wired-slider {
-      margin: 5px 0;
+      margin: 16px 0;
       max-width: 100%;
       box-sizing: border-box;
     }
@@ -27,9 +27,13 @@
 
 <body>
   <wired-slider></wired-slider>
-  <wired-slider value="40"></wired-slider>
+  <br>
+  <wired-slider value="40" style="width: 600px;"></wired-slider>
+  <br>
   <wired-slider value="10" min="5" max="15"></wired-slider>
+  <br>
   <wired-slider value="60" disabled></wired-slider>
+  <br>
   <wired-slider class="custom" value="25"></wired-slider>
 </body>
 
diff --git a/src/wired-slider.ts b/src/wired-slider.ts
@@ -63,8 +63,8 @@ export class WiredSlider extends WiredBase {
         cursor: pointer;
         border: none;
         margin: 0;
-        height: 20px;
-        width: 20px;
+        height: 24px;
+        width: 24px;
         line-height: 1;
       }
       input[type=range]::-webkit-slider-thumb {
@@ -73,8 +73,8 @@ export class WiredSlider extends WiredBase {
         background: none;
         cursor: pointer;
         border: none;
-        height: 20px;
-        width: 20px;
+        height: 24px;
+        width: 24px;
         margin: 0;
         line-height: 1;
       }
@@ -84,6 +84,7 @@ export class WiredSlider extends WiredBase {
       }
       .bar {
         stroke: var(--wired-slider-bar-color, rgb(0, 0, 0));
+        stroke-width: 1;
       }
       input:focus + div svg .knob {
         stroke: var(--wired-slider-knob-outline-color, #000);
@@ -161,7 +162,7 @@ export class WiredSlider extends WiredBase {
     this.canvasWidth = size[0];
     const midY = Math.round(size[1] / 2);
     line(svg, 0, midY, size[0], midY, this.seed).classList.add('bar');
-    this.knob = ellipse(svg, 10, midY, 20, 20, this.seed);
+    this.knob = ellipse(svg, 12, midY, 24, 24, this.seed);
     this.knob.classList.add('knob');
   }
 
@@ -171,7 +172,7 @@ export class WiredSlider extends WiredBase {
       const delta = Math.max(this.step, this.max - this.min);
       const pct = (value - this.min) / delta;
       if (this.knob) {
-        this.knob.style.transform = `translateX(${pct * (this.canvasWidth - 20)}px)`;
+        this.knob.style.transform = `translateX(${pct * (this.canvasWidth - 24)}px)`;
       }
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -63,8 +63,8 @@ export class WiredSlider extends WiredBase {`
`63`	`63`	`cursor: pointer;`
`64`	`64`	`border: none;`
`65`	`65`	`margin: 0;`
`66`		`- height: 20px;`
`67`		`- width: 20px;`
	`66`	`+ height: 24px;`
	`67`	`+ width: 24px;`
`68`	`68`	`line-height: 1;`
`69`	`69`	`}`
`70`	`70`	`input[type=range]::-webkit-slider-thumb {`
`@@ -73,8 +73,8 @@ export class WiredSlider extends WiredBase {`
`73`	`73`	`background: none;`
`74`	`74`	`cursor: pointer;`
`75`	`75`	`border: none;`
`76`		`- height: 20px;`
`77`		`- width: 20px;`
	`76`	`+ height: 24px;`
	`77`	`+ width: 24px;`
`78`	`78`	`margin: 0;`
`79`	`79`	`line-height: 1;`
`80`	`80`	`}`
`@@ -84,6 +84,7 @@ export class WiredSlider extends WiredBase {`
`84`	`84`	`}`
`85`	`85`	`.bar {`
`86`	`86`	`stroke: var(--wired-slider-bar-color, rgb(0, 0, 0));`
	`87`	`+ stroke-width: 1;`
`87`	`88`	`}`
`88`	`89`	`input:focus + div svg .knob {`
`89`	`90`	`stroke: var(--wired-slider-knob-outline-color, #000);`
`@@ -161,7 +162,7 @@ export class WiredSlider extends WiredBase {`
`161`	`162`	`this.canvasWidth = size[0];`
`162`	`163`	`const midY = Math.round(size[1] / 2);`
`163`	`164`	`line(svg, 0, midY, size[0], midY, this.seed).classList.add('bar');`
`164`		`- this.knob = ellipse(svg, 10, midY, 20, 20, this.seed);`
	`165`	`+ this.knob = ellipse(svg, 12, midY, 24, 24, this.seed);`
`165`	`166`	`this.knob.classList.add('knob');`
`166`	`167`	`}`
`167`	`168`
`@@ -171,7 +172,7 @@ export class WiredSlider extends WiredBase {`
`171`	`172`	`const delta = Math.max(this.step, this.max - this.min);`
`172`	`173`	`const pct = (value - this.min) / delta;`
`173`	`174`	`if (this.knob) {`
`174`		- this.knob.style.transform = `translateX(${pct * (this.canvasWidth - 20)}px)`;
	`175`	+ this.knob.style.transform = `translateX(${pct * (this.canvasWidth - 24)}px)`;
`175`	`176`	`}`
`176`	`177`	`}`
`177`	`178`	`}`