feat saadeghi#1483 adds vertical sliders

TheBrenny · Aug 10, 2024 · 89fe816 · 89fe816
1 parent e3cd43a
commit 89fe816
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/src/components/styled/range.css b/src/components/styled/range.css
@@ -40,6 +40,59 @@
       var(--focus-shadow, 0 0),
       calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
   }
+
+  &-vertical {
+    writing-mode: vertical-lr;
+    direction: rtl;
+    height: 100%;
+    max-height: 10em;
+    width: 1.5rem;
+
+    &:focus-visible::-webkit-slider-thumb {
+      --focus-shadow: 0 0 0 6px theme(colors.base-100) inset, 0 0 0 2rem var(--range-shdw) inset;
+    }
+    &:focus-visible::-moz-range-thumb {
+      --focus-shadow: 0 0 0 6px theme(colors.base-100) inset, 0 0 0 2rem var(--range-shdw) inset;
+    }
+    &::-webkit-slider-runnable-track {
+      @apply w-2 h-full;
+    }
+    &::-moz-range-track {
+      @apply w-2 h-full;
+    }
+    &::-webkit-slider-thumb {
+      top: 0%;
+      left: 50%;
+      transform: translateX(-50%);
+      box-shadow:
+        0 0 0 3px var(--range-shdw) inset,
+        var(--focus-shadow, 0 0),
+        0 calc(var(--filler-size) * 1 + var(--filler-offset)) 0 var(--filler-size);
+    }
+    &::-moz-range-thumb {
+      top: 0%;
+      left: 50%;
+      box-shadow:
+        0 0 0 3px var(--range-shdw) inset,
+        var(--focus-shadow, 0 0),
+        0 calc(var(--filler-size) * 1 + var(--filler-offset)) 0 var(--filler-size);
+    }
+    &.range-invert {
+      direction: ltr;
+      &::-webkit-slider-thumb {
+        box-shadow:
+          0 0 0 3px var(--range-shdw) inset,
+          var(--focus-shadow, 0 0),
+          0 calc(var(--filler-size) * -1 - var(--filler-offset)) 0 var(--filler-size);
+      }
+      &::-moz-range-thumb {
+        box-shadow:
+          0 0 0 3px var(--range-shdw) inset,
+          var(--focus-shadow, 0 0),
+          0 calc(var(--filler-size) * -1 - var(--filler-offset)) 0 var(--filler-size);
+      }
+    }
+  }
   &-primary {
     --range-shdw: theme(colors.primary);
   }

diff --git a/src/docs/src/routes/(docs)/components/range/+page.svx b/src/docs/src/routes/(docs)/components/range/+page.svx
@@ -177,3 +177,16 @@ data="{[
 
 {/snippet}
 </Component>
+
+<Component title="Vertical and inverted">
+<input type="range" min="0" max="100" value="40" class="range range-vertical max-w-xs" />
+<input type="range" min="0" max="100" value="40" class="range range-vertical range-invert max-w-xs" />
+{#snippet html()}
+
+```html
+<input type="range" min="0" max="100" value="40" class="range range-vertical max-w-xs" />
+<input type="range" min="0" max="100" value="40" class="range range-vertical range-invert max-w-xs" />
+```
+
+{/snippet}
+</Component>