Example updates

planetlabs · Dec 3, 2023 · 8856c70 · 8856c70
1 parent 88cbfa9
commit 8856c70
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/site/src/components/examples/Slider.jsx b/site/src/components/examples/Slider.jsx
@@ -10,13 +10,9 @@ function Slider() {
 
   function onPrerender(event) {
     const ctx = event.context;
-    const width = (ctx.canvas.width * percent) / 100;
-    const start = 0;
-    const end = width;
-
     ctx.save();
     ctx.beginPath();
-    ctx.rect(start, 0, end, ctx.canvas.height);
+    ctx.rect(0, 0, (ctx.canvas.width * percent) / 100, ctx.canvas.height);
     ctx.clip();
   }
 
@@ -39,8 +35,10 @@ function Slider() {
         type="range"
         min={0}
         max={100}
+        step={0.25}
+        style={{width: '100%'}}
         value={percent}
-        onChange={event => updatePercent(event.target.value)}
+        onChange={event => updatePercent(parseInt(event.target.value))}
       />
     </>
   );

diff --git a/site/src/content/examples/slider.mdx b/site/src/content/examples/slider.mdx
@@ -1,5 +1,5 @@
 ---
-title: 'Slider Compare'
+title: 'Comparison Slider'
 level: 1
 description: |
   This example shows a range slider can be used to compare two layers.  The