Skip to content

Commit

Permalink
fix: slider: pixel push extremity labels to better match thumb label …
Browse files Browse the repository at this point in the history 
…position (#577)
  • Loading branch information
@dkilgore-eightfold @rnori-eightfold
dkilgore-eightfold authored and rnori-eightfold committed Apr 5, 2023
1 parent 1b5d2f2 commit dc14546
Show file tree
Hide file tree
Showing 3 changed files with 163 additions and 50 deletions.
44 changes: 22 additions & 22 deletions src/components/Slider/Slider.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,13 @@ const Slider_Story: ComponentStory<typeof Slider> = (args) => {
};

return (
<Stack align="stretch" direction="vertical" fullWidth gap="xl">
<Stack align="stretch" direction="vertical" fullWidth flexGap="xl">
<Slider
{...args}
onChange={handleChangeA}
value={transientSlidingAValue}
/>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<div>{transientSlidingAValue}</div>
</Stack>
<Row style={{ marginTop: 100 }}>
Expand All @@ -61,7 +61,7 @@ const Slider_Story: ComponentStory<typeof Slider> = (args) => {
/>
</Col>
</Row>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<div>{transientSlidingBValue}</div>
</Stack>
</Stack>
Expand All @@ -85,13 +85,13 @@ const Range_Slider_Story: ComponentStory<typeof Slider> = (args) => {
};

return (
<Stack align="stretch" direction="vertical" fullWidth gap="xl">
<Stack align="stretch" direction="vertical" fullWidth flexGap="xl">
<Slider
{...args}
onChange={handleChangeA}
value={transientSlidingAValues}
/>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<div>{transientSlidingAValues[0]}</div>
<div>{transientSlidingAValues[1]}</div>
</Stack>
Expand All @@ -109,7 +109,7 @@ const Range_Slider_Story: ComponentStory<typeof Slider> = (args) => {
/>
</Col>
</Row>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<div>{transientSlidingBValues[0]}</div>
<div>{transientSlidingBValues[1]}</div>
</Stack>
Expand All @@ -134,13 +134,13 @@ const Inline_Extemity_Labels_Story: ComponentStory<typeof Slider> = (args) => {
};

return (
<Stack align="stretch" direction="vertical" fullWidth gap="xl">
<Stack align="stretch" direction="vertical" fullWidth flexGap="xl">
<Slider
{...args}
onChange={handleChangeA}
value={transientSlidingAValue}
/>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<div>{transientSlidingAValue}</div>
</Stack>
<Slider
Expand All @@ -151,7 +151,7 @@ const Inline_Extemity_Labels_Story: ComponentStory<typeof Slider> = (args) => {
style={{ marginTop: 100 }}
value={transientSlidingBValues}
/>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<div>{transientSlidingBValues[0]}</div>
<div>{transientSlidingBValues[1]}</div>
</Stack>
Expand All @@ -175,7 +175,7 @@ const Custom_Markers_Included_Story: ComponentStory<typeof Slider> = (args) => {
};

return (
<Stack align="stretch" direction="vertical" fullWidth gap="xl">
<Stack align="stretch" direction="vertical" fullWidth flexGap="xl">
<Slider
{...args}
onChange={handleChangeA}
Expand Down Expand Up @@ -258,13 +258,13 @@ const Dots_Story: ComponentStory<typeof Slider> = (args) => {
};

return (
<Stack align="stretch" direction="vertical" fullWidth gap="xl">
<Stack align="stretch" direction="vertical" fullWidth flexGap="xl">
<Slider
{...args}
onChange={handleChangeA}
value={transientSlidingAValue}
/>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<div>{transientSlidingAValue}</div>
</Stack>
</Stack>
Expand All @@ -289,17 +289,17 @@ const Toggle_Thumb_Story: ComponentStory<typeof Slider> = (args) => {
};

return (
<Stack align="stretch" direction="vertical" fullWidth gap="xl">
<Stack align="stretch" direction="vertical" fullWidth flexGap="xl">
<Slider
{...args}
hideThumb={thumbHidden}
onChange={handleChangeA}
value={transientSlidingAValue}
/>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<div>{transientSlidingAValue}</div>
</Stack>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<PrimaryButton
onClick={toggleThumbVisibility}
text={thumbHidden ? 'Show thumb' : 'Hide thumb'}
Expand Down Expand Up @@ -816,7 +816,7 @@ const With_Benchmark_Story: ComponentStory<typeof Slider> = (args) => {
};

return (
<Stack align="stretch" direction="vertical" fullWidth gap="xl">
<Stack align="stretch" direction="vertical" fullWidth flexGap="xl">
<Slider
{...args}
dotStyle={{
Expand All @@ -825,7 +825,7 @@ const With_Benchmark_Story: ComponentStory<typeof Slider> = (args) => {
onChange={handleChange}
value={transientSlidingValue}
/>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<div>{transientSlidingValue}</div>
</Stack>
</Stack>
Expand All @@ -842,7 +842,7 @@ const Data_Inactive_Story: ComponentStory<typeof Slider> = (args) => {
};

return (
<Stack align="stretch" direction="vertical" fullWidth gap="xl">
<Stack align="stretch" direction="vertical" fullWidth flexGap="xl">
<Slider
{...args}
dotStyle={{
Expand All @@ -851,7 +851,7 @@ const Data_Inactive_Story: ComponentStory<typeof Slider> = (args) => {
onChange={handleChangeB}
value={transientSlidingBValues}
/>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<div>{transientSlidingBValues[0]}</div>
<div>{transientSlidingBValues[1]}</div>
</Stack>
Expand Down Expand Up @@ -954,7 +954,7 @@ const Data_Active_Story: ComponentStory<typeof Slider> = (args) => {
name: 'blue',
}}
>
<Stack align="stretch" direction="vertical" fullWidth gap="xl">
<Stack align="stretch" direction="vertical" fullWidth flexGap="xl">
<div>
<Slider {...args} ref={sliderRef} onChange={handleChangeRange} />
<Slider
Expand All @@ -972,11 +972,11 @@ const Data_Active_Story: ComponentStory<typeof Slider> = (args) => {
value={targetSlidingValue}
/>
</div>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<div>{transientSlidingValues[0]}</div>
<div>{transientSlidingValues[1]}</div>
</Stack>
<Stack direction="horizontal" gap="xl" justify="center" fullWidth>
<Stack direction="horizontal" flexGap="xl" justify="center" fullWidth>
<PrimaryButton
iconProps={{
icomoonIconName: 'employee',
Expand Down
25 changes: 13 additions & 12 deletions src/components/Slider/Slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,10 +282,10 @@ export const Slider: FC<SliderProps> = React.forwardRef(
thumbRadius: number
): number => {
const inputWidth = sliderRef.current?.offsetWidth || 0;
return (
return Math.floor(
((val - mergedMin) / (mergedMax - mergedMin)) *
(inputWidth - thumbDiameter) +
thumbRadius
thumbRadius
);
};

Expand Down Expand Up @@ -351,27 +351,28 @@ export const Slider: FC<SliderProps> = React.forwardRef(
}

if (!isRange) {
const lowerLabelOffset: number =
lowerLabelRef.current?.offsetWidth / 2 -
sliderRef.current?.offsetLeft;
const lowerLabelOffset: number = Math.floor(
lowerLabelRef.current?.offsetWidth / 2 - sliderRef.current?.offsetLeft
);
const showMarkerOffest: number =
showMarkers === true ? thumbGeometry().showMarkerOffset : 0;

if (htmlDir === 'rtl') {
lowerLabelRef.current.style.right = `${
lowerLabelRef.current.style.right = `${Math.floor(
lowerThumbOffset - lowerLabelOffset - showMarkerOffest
}px`;
)}px`;
lowerLabelRef.current.style.left = 'unset';
} else {
lowerLabelRef.current.style.left = `${
lowerLabelRef.current.style.left = `${Math.floor(
lowerThumbOffset - lowerLabelOffset - showMarkerOffest
}px`;
)}px`;
lowerLabelRef.current.style.right = 'unset';
}
} else {
if (labelPosition === 'inline') {
const sliderLabelsOffset: number =
sliderLabelsRef.current.offsetWidth / 2;
const sliderLabelsOffset: number = Math.floor(
sliderLabelsRef.current.offsetWidth / 2
);

if (htmlDir === 'rtl') {
sliderLabelsRef.current.style.marginRight = `-${sliderLabelsOffset}px`;
Expand Down Expand Up @@ -439,7 +440,7 @@ export const Slider: FC<SliderProps> = React.forwardRef(
? `${lowerThumbOffset}px`
: `${thumbRadius}px`;
}
trackRef.current.style.width = `${rangeWidth}px`;
trackRef.current.style.width = `${Math.floor(rangeWidth)}px`;
};

const [formatValue] = useOffset(mergedMin, mergedMax, mergedStep, markers);
Expand Down
Loading

0 comments on commit dc14546

Please sign in to comment.