Skip to content

[docs][material-ui] Fix slider in color customization playground twitches when sliding #43671

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 14, 2024
Merged

[docs][material-ui] Fix slider in color customization playground twitches when sliding #43671

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c763f33
Slider twitch issue resolved
Nashyn Sep 9, 2024
6cbc59f
prettier issue fixed
Nashyn Sep 9, 2024
6c135fc
Merge branch 'mui:master' into nisarg
Nashyn Sep 14, 2024
59e10c3
Slider twitch issue updated
Sep 14, 2024
dd0ae07
minor change
Sep 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions docs/data/material/customization/color/ColorTool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,9 @@ function ColorTool() {
);
};

const COLOR_WIDTH = 156;
const SLIDER_WIDTH_CALC = 'calc(100% - 80px)';

const colorPicker = (intent) => {
const intentInput = state[`${intent}Input`];
const intentShade = state[`${intent}Shade`];
Expand All @@ -229,15 +232,17 @@ function ColorTool() {
<Box sx={{ display: 'flex', alignItems: 'center', mt: 2, mb: 2 }}>
<Typography id={`${intent}ShadeSliderLabel`}>Shade:</Typography>
<Slider
sx={{ width: 'calc(100% - 80px)', ml: 3, mr: 3 }}
sx={{ width: SLIDER_WIDTH_CALC, ml: 3, mr: 3 }}
value={intentShade}
min={0}
max={13}
step={1}
onChange={handleChangeShade(intent)}
aria-labelledby={`${intent}ShadeSliderLabel`}
/>
<Typography>{shades[intentShade]}</Typography>
<div style={{ width: `${COLOR_WIDTH}px` }}>
<Typography>{shades[intentShade]}</Typography>
</div>
</Box>
<Box sx={{ width: 192 }}>
{hues.map((hue) => {
Expand Down