Update slider styles

Make slider more aesthetic.

packages/web-kitchensink-reactnext/pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
 
 settings:
   autoInstallPeers: true

packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx

@@ -104,6 +104,9 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
     const isFirefox = typeof (window as unknown as Record<string, unknown>).InstallTrigger !== 'undefined';
     if (isFirefox) {
       setBrowser('firefox');
+    } else {
+      // TODO - detect other browsers
+      setBrowser('chrome');
     }
   }, []);
 
@@ -118,13 +121,17 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
 
     const {current: slider} = ref;
     const isFirefox = browser === 'firefox';
+    const parent = slider?.parentElement as HTMLElement;
+    const grandParent = parent?.parentElement as HTMLElement;
     if (isFirefox) {
       slider.setAttribute('orient', orient);
       slider.removeAttribute('data-orient');
+      grandParent.style.width = '0px';
     }
 
     return () => {
       if (slider && isFirefox) {
+        grandParent.style.width = 'auto';
         slider.dataset.orient = slider.getAttribute(orient) ?? undefined;
         slider.removeAttribute('orient');
       }
@@ -140,7 +147,7 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
     const parent = slider?.parentElement as HTMLElement;
     const grandParent = parent?.parentElement as HTMLElement;
 
-    const isNotFirefox = browser !== 'firefox';
+    const isNotFirefox = typeof browser === 'string' && browser !== 'firefox';
     const shouldEffectExecute = isNotFirefox && orient === 'vertical' && slider && parent && grandParent;
     if (shouldEffectExecute) {
       const trueHeight = parent.clientWidth;

packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/style.module.css

@@ -4,45 +4,36 @@
   position: relative;
   overflow: hidden;
   height: 1em;
+  box-sizing: border-box;
   color: rgb(var(--color-primary));
 }
 
 .slider::-webkit-slider-container {
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  background-color: rgb(var(--color-primary) / 50%);
+  border-radius: 9999px;
+  display: block;
   box-sizing: border-box;
+  background-clip: content-box;
+  padding: 0.25em;
 }
 
 .slider::-webkit-slider-runnable-track {
   appearance: none;
   border-radius: 9999px;
-  content: '';
   display: block;
-  position: absolute;
-  background-color: rgb(var(--color-primary) / 50%);
   width: 100%;
-  height: 50%;
-  top: 25%;
-}
-
-.slider::-moz-range-track {
-  appearance: none;
-  border-radius: 9999px;
-  content: '';
-  display: block;
-  position: absolute;
-  background-color: currentColor;
-  opacity: 0.5;
-  width: 100%;
-  height: 50%;
-  top: 25%;
+  height: 100%;
+  margin: -0.25em;
+  box-sizing: border-box;
+  background-clip: content-box;
 }
 
 .slider::-webkit-slider-thumb {
-  margin-top: -0.25em;
   width: 1em;
   height: 200%;
+  margin: -0.25em 0 0 0;
 
   border-radius: 9999px;
   background-color: currentColor;
@@ -53,25 +44,11 @@
   box-shadow: -100000.5em 0 0 100000em rgb(var(--color-primary) / 50%);
 }
 
-.slider::-moz-range-thumb {
-  height: 100%;
-  outline: 0;
-  border: 0;
-
-  border-radius: 9999px;
-  background-color: currentColor;
-  appearance: none;
-  aspect-ratio: 1 / 1;
-  z-index: 1;
-  position: relative;
-  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-primary) / 50%);
-}
-
-.slider:focus::-webkit-slider-runnable-track {
+.slider:focus::-webkit-slider-container {
   background-color: rgb(var(--color-secondary) / 50%);
 }
 
-.slider:active::-webkit-slider-runnable-track {
+.slider:active::-webkit-slider-container {
   background-color: rgb(var(--color-tertiary) / 50%);
 }
 
@@ -83,6 +60,40 @@
   box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
 }
 
+.slider[data-orient='vertical'] {
+  rotate: -90deg;
+  translate: calc(-100% + 0.5em * 2);
+  transform-origin: calc(100% - 0.5em) 0.5em;
+}
+
+.slider::-moz-range-track {
+  appearance: none;
+  border-radius: 9999px;
+  content: '';
+  display: block;
+  position: absolute;
+  background-color: currentColor;
+  opacity: 0.5;
+  width: calc(100% - 0.5em);
+  height: 50%;
+  top: 25%;
+  margin: -0.25em;
+}
+
+.slider::-moz-range-thumb {
+  height: 100%;
+  outline: 0;
+  border: 0;
+
+  border-radius: 9999px;
+  background-color: currentColor;
+  appearance: none;
+  aspect-ratio: 1 / 1;
+  z-index: 1;
+  position: relative;
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-primary) / 50%);
+}
+
 .slider:focus::-moz-range-thumb {
   box-shadow: -100000.5em 0 0 100000em rgb(var(--color-secondary) / 50%);
 }
@@ -98,7 +109,7 @@
 
 .slider[orient='vertical']::-moz-range-track {
   width: 50%;
-  height: 100%;
+  height: calc(100% - 0.5em);
 }
 
 .slider[orient='vertical']::-moz-range-thumb {
@@ -114,9 +125,3 @@
 .slider[orient='vertical']:active::-moz-range-thumb {
   box-shadow: 0 100000.5em 0 100000em rgb(var(--color-tertiary) / 50%);
 }
-
-.slider[data-orient='vertical'] {
-  rotate: -90deg;
-  translate: calc(-100% + 0.5em * 2);
-  transform-origin: calc(100% - 0.5em) 0.5em;
-}