Last value misalignment fixed for Slider Input component

future-standard · Dec 11, 2023 · 0de3b48 · 0de3b48
1 parent c6a04e6
commit 0de3b48
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/Form/atoms/SliderInput.tsx b/src/Form/atoms/SliderInput.tsx
@@ -61,23 +61,23 @@ const Mark = styled.span<{leftValue: number}>`
   background-color: hsl(205, 77%, 64%);
 `;
 
-const MarkLabel = styled.span<{leftValue: number; alignment?: IMartAlignment; isCenterAlignedEndNum?: boolean}>`
+const MarkLabel = styled.span<{leftValue: number; alignment?: IMartAlignment; isCenterAlignedEndNum?: boolean; isFromSliderStory?: boolean}>`
   position: absolute;
   top: -24px;
   font-size: 10px;
   font-style: italic;
   line-height: normal;
   text-align: center;
   color: hsla(195, 10%, 52%, 0.72);
-  left: ${({ leftValue, isCenterAlignedEndNum }) => {
+  left: ${({ leftValue, isCenterAlignedEndNum, isFromSliderStory }) => {
     if (isCenterAlignedEndNum) {
       let baseValue;
       switch (leftValue) {
         case 0:
           baseValue = 2;
           break;
         case 100:
-          baseValue = 22;
+          baseValue = isFromSliderStory ? 15 : 22;
           break;
         default:
           baseValue = 7;
@@ -188,7 +188,7 @@ const getMarkAlignment = (value: number, min: number, max: number) : IMartAlignm
   return 'center';
 };
 
-const renderMarks = (markList: ISliderMark[], min: number, max: number, listTag: string, isCenterAlignedEndNum?: boolean) => {
+const renderMarks = (markList: ISliderMark[], min: number, max: number, listTag: string, isCenterAlignedEndNum?: boolean, isFromSliderStory?: boolean) => {
 
   const listOptions : JSX.Element[] = [];
   const marksElements = markList.map(({value, label}, index) => {
@@ -206,6 +206,7 @@ const renderMarks = (markList: ISliderMark[], min: number, max: number, listTag:
           leftValue={left}
           alignment={getMarkAlignment(value, min, max)}
           isCenterAlignedEndNum={isCenterAlignedEndNum}
+          isFromSliderStory={isFromSliderStory}
         >
           {label}
         </MarkLabel>
@@ -244,6 +245,7 @@ interface ISliderOwnProps {
   inputCallback?: (value: number) => void
   onChangeCallback?: (value: number) => void
   isCenterAlignedEndNum?: boolean
+  isFromSliderStory?: boolean
 }
 
 export type ISlider = ISliderOwnProps & InputHTMLAttributes<HTMLInputElement>;
@@ -261,6 +263,7 @@ const SliderInput : React.FC<ISlider> = ({
   inputCallback = () => {},
   onChangeCallback = () => {},
   isCenterAlignedEndNum,
+  isFromSliderStory,
   ...props
 }) => {
 
@@ -334,7 +337,7 @@ const SliderInput : React.FC<ISlider> = ({
     <SliderWrapper disabled={disabled}>
       <Rail />
       <ThumbWrapper>
-        {marks && renderMarks(marks, minValid, maxValid, `sliderList-${minValid}-${maxValid}`, isCenterAlignedEndNum)}
+        {marks && renderMarks(marks, minValid, maxValid, `sliderList-${minValid}-${maxValid}`, isCenterAlignedEndNum, isFromSliderStory)}
         {isGhostActive && onlyMarkSelect
           ? (
             <GhostThumb

diff --git a/storybook/src/stories/Form/Input/SliderInput.stories.tsx b/storybook/src/stories/Form/Input/SliderInput.stories.tsx
@@ -79,6 +79,7 @@ export const _SliderInput = () => {
           marks={marks}
           defaultValue={defaultValue}
           isCenterAlignedEndNum={isCenterAlignedEndNum}
+          isFromSliderStory={isCenterAlignedEndNum}
         />
     </Container>
   )