slider fix

UmbraJS · Sep 19, 2024 · 79efc49 · 79efc49
1 parent c1279b4
commit 79efc49
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 13 deletions.
diff --git a/apps/nobel/src/assets/styles/main.scss b/apps/nobel/src/assets/styles/main.scss
@@ -18,6 +18,12 @@ $desktop: 1200px;
   --block-shell: calc(var(--block) + var(--space-atom) * 2);
   --block: calc(var(--paragraph) + var(--space-atom) * 2);
   --block-inner: calc(var(--paragraph) + var(--space-atom));
+
+  // --block-xbig: calc(var(--block-big) + var(--space-atom) * 2);
+  // --block-big: calc(var(--paragraph) + var(--space-atom) * 2);
+  // --block: calc(var(--paragraph) + var(--space-atom));
+  // --block-small: calc(var(--paragraph) + var(--space-atom));
+
   --space-atom: calc(var(--paragraph) * 0.7);
   --space-quark: calc(var(--space-atom) / 2);
 }

diff --git a/packages/nobel/components/ui/Slider/Slider.vue b/packages/nobel/components/ui/Slider/Slider.vue
@@ -16,7 +16,7 @@ const value = ref(50)
 
 <style scoped lang="scss">
 .slider-wrapper {
-  --handle-size: 1.5rem;
+  --handle-size: calc(var(--block) - var(--space-atom));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -28,41 +28,59 @@ const value = ref(50)
 }
 
 .slider-wrapper input {
+  opacity: 0;
+  cursor: pointer;
   position: absolute;
+  z-index: 3;
   width: calc(100% - var(--handle-size));
+  height: var(--block);
+}
+input[type='range'] {
+  -webkit-appearance: none; /* Chrome and Safari */
+  -moz-appearance: none; /* Firefox */
+  appearance: none; /* Standard */
 }
 
-/* Special styling for WebKit/Blink */
-.slider-wrapper input::-webkit-slider-thumb {
+input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
-  height: 6px;
-  width: 6px;
-  border-radius: 0px;
-  background: #ffffff;
-  cursor: pointer;
-  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
+  height: 5px;
+  width: 0px;
+  border: none;
+  background: blue;
+}
+
+input[type='range']::-moz-range-thumb {
+  height: 5px;
+  width: 0px;
+  border: none;
+  background: blue;
 }
 
 .slider-wrapper .slider {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
-  height: var(--block-inner);
+  height: var(--block);
   width: 100%;
   background: var(--accent-100);
   border-radius: var(--radius);
 }
 
 .slider-wrapper .slider .fill {
+  position: relative;
   display: flex;
   align-items: center;
   justify-self: flex-end;
-  height: var(--block-inner);
+  height: var(--block);
   width: calc(v-bind(value) * 1%);
   background: var(--accent-20);
   border-radius: var(--radius);
 }
 
 .slider-wrapper .slider .fill .handle {
+  position: absolute;
+  right: calc(0px - var(--handle-size) / 2);
   height: var(--handle-size);
   aspect-ratio: 1 / 1;
   background: var(--base-100);

diff --git a/packages/nobel/package.json b/packages/nobel/package.json
@@ -20,8 +20,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/core.js",
-      "require": "./dist/core.js"
+      "import": "./index.js",
+      "require": "./index.js"
     },
     "./*": "./*"
   },