Fix styles

Arize-ai · Aug 2, 2023 · 216a054 · 216a054
1 parent 811a278
commit 216a054
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/src/slider/Slider.tsx b/src/slider/Slider.tsx
@@ -65,8 +65,7 @@ function Slider(props: ACSliderProps, ref: FocusableRef<HTMLDivElement>) {
               //    width: calc(var(--width) * 1%)M
               // }
               // @ts-ignore
-              '--spectrum-track-background-size': `${(1 /
-                state.getThumbPercent(0)) *
+              '--ac-track-background-size': `${(1 / state.getThumbPercent(0)) *
                 100}%`,
             }}
           />

diff --git a/src/slider/SliderBase.tsx b/src/slider/SliderBase.tsx
@@ -22,6 +22,13 @@ export interface SliderBaseProps<T = number[]> extends BarSliderBase<T> {
 
 const controlsCSS = css`
   min-height: var(--ac-slider-height, var(--ac-alias-single-line-height));
+  width: calc(
+    100% - var(--ac-slider-handle-width, var(--ac-global-dimension-size-200)) /
+      2 * 2
+  );
+  margin-left: calc(
+    var(--ac-slider-handle-width, var(--ac-global-dimension-size-200)) / 2
+  );
 `;
 
 function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {

diff --git a/src/slider/styles.tsx b/src/slider/styles.tsx
@@ -29,7 +29,6 @@ export const sliderCSS = css`
       content: '';
       height: 100%;
       display: block;
-      border-radius: var(--ac-global-border-size-thicker);
     }
     &:first-of-type::before,
     &:last-of-type::before {
@@ -40,18 +39,28 @@ export const sliderCSS = css`
       /* The middle track */
       background: ${theme.colors.arizeLightBlue};
     }
-    &:last-of-type {
+    &:first-of-type {
       margin-left: calc(
         var(--ac-slider-handle-width, var(--ac-global-dimension-size-200)) / 2 *
           -1
       );
+      ::before {
+        border-top-left-radius: var(--ac-global-border-size-thicker);
+        border-bottom-left-radius: var(--ac-global-border-size-thicker);
+      }
+    }
+    &:last-of-type {
+      margin-right: calc(
+        var(--ac-slider-handle-width, var(--ac-global-dimension-size-200)) / 2 *
+          -1
+      );
       right: 0;
       left: auto;
-      padding-left: var(
-        --ac-slider-handle-gap,
-        var(--ac-global-border-size-thicker)
-      );
       padding-right: 0;
+      &::before {
+        border-top-right-radius: var(--ac-global-border-size-thicker);
+        border-bottom-right-radius: var(--ac-global-border-size-thicker);
+      }
     }
   }
 `;

diff --git a/stories/Slider.stories.tsx b/stories/Slider.stories.tsx
@@ -32,6 +32,13 @@ export const Gallery = () => {
     <Provider>
       <Flex direction="column">
         <Slider label="Cost" defaultValue={12} />
+        <Slider
+          label="Cost"
+          defaultValue={0.5}
+          minValue={0}
+          maxValue={0.99}
+          step={0.01}
+        />
         <Switch>Send Emails</Switch>
       </Flex>
     </Provider>