fix(Slider): wrong styles

Author: tenphi

src/components/fields/Slider/RangeSlider.stories.tsx

@@ -42,3 +42,9 @@ WithoutValue.args = {
   label: 'Slider',
   showValueLabel: false,
 };
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+  label: 'Slider',
+  orientation: 'vertical',
+};

src/components/fields/Slider/RangeSlider.tsx

@@ -28,7 +28,11 @@ function RangeSlider(props: CubeRangeSliderProps, ref: DOMRef<HTMLDivElement>) {
         return (
           <>
             <Gradation state={state} ranges={[0, 1]} values={gradation} />
-            <SliderTrack state={state} isDisabled={isDisabled} />
+            <SliderTrack
+              state={state}
+              isDisabled={isDisabled}
+              orientation={props.orientation}
+            />
             <SliderThumb
               index={0}
               aria-label={INTL_MESSAGES['minimum']}

src/components/fields/Slider/SliderTrack.tsx

@@ -35,7 +35,7 @@ export function SliderTrack(props: SliderTrackProps) {
               '--slider-range-end': `${selectedTrack[1] * 100}%`,
             }
           : {
-              '--slider-percent-value': `${selectedTrack[0] * 100}%`,
+              '--slider-value': `${selectedTrack[0] * 100}%`,
             }
       }
     />

src/components/fields/Slider/elements.ts

@@ -55,16 +55,24 @@ export const SliderTrackContainerElement = tasty({
       content: '""',
       display: 'block',
       position: 'absolute',
-      top: 0,
-      bottom: 0,
-      fill: '#purple',
-      left: {
-        '': '0',
-        range: '@slider-range-start',
+      inset: {
+        '': 'auto 0 0 0',
+        horizontal: '0 auto 0 0',
+        range: 'auto 0 @slider-range-start 0',
+        'range & horizontal': '0 auto 0 @slider-range-start',
       },
+      fill: '#purple',
       width: {
-        '': '@slider-percent-value',
+        '': 'auto',
+        horizontal: '@slider-value',
+        range: 'auto',
+        'range & horizontal': '(@slider-range-end - @slider-range-start)',
+      },
+      height: {
+        '': '@slider-value',
+        horizontal: 'auto',
         range: '(@slider-range-end - @slider-range-start)',
+        'range & horizontal': 'auto',
       },
     },
   },