fix slider style

Author: lerte

packages/actify/src/components/Sliders/Thumb.tsx

@@ -47,7 +47,11 @@ const Thumb = (props: ThumbProps) => {
     >
       <div className={styles['thumb']}>
         <VisuallyHidden>
-          <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />
+          <input
+            ref={inputRef}
+            className={styles['input']}
+            {...mergeProps(inputProps, focusProps)}
+          />
         </VisuallyHidden>
         {isFocusVisible && <FocusRing />}
         <Ripple id={inputProps.id} disabled={state.isDisabled} />

packages/actify/src/components/Sliders/slider.module.css

@@ -167,6 +167,7 @@
 
 .slider.horizontal .track {
   height: 40px;
+  margin: 0 auto;
   width: calc(100% - var(--_state-layer-size));
 }
 
@@ -223,10 +224,11 @@
 
 .slider.horizontal .track:before,
 .slider.horizontal .track:after {
-  height: var(--_active-track-height);
-  width: 100%;
   top: 50%;
   transform: translateY(-50%);
+  height: var(--_active-track-height);
+  width: 100%;
+  left: 0;
 }
 
 .slider.vertical .track {
@@ -256,6 +258,19 @@
   background: var(--_handle-color);
   border-radius: var(--_handle-shape);
 }
+.input {
+  opacity: 0;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  position: absolute;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  margin: 0px;
+  background: rgba(0, 0, 0, 0);
+  cursor: pointer;
+  pointer-events: auto;
+  appearance: none;
+}
 
 .slider.horizontal .handle {
   top: 50%;