Skip to content

feat(ui): improve slider styling - #7449

Open
creeperkatze wants to merge 11 commits into
modrinth:mainfrom
creeperkatze:slider-component-improvements
Open

feat(ui): improve slider styling#7449
creeperkatze wants to merge 11 commits into
modrinth:mainfrom
creeperkatze:slider-component-improvements

Conversation

@creeperkatze

Copy link
Copy Markdown
Contributor

Improves the slider styling and fixes some issues.

The knob is now smaller and uses the contrast color instead of the muted body text gray. Its ring only shows on hover and focus now, and the rectangular focus ring around the whole track is gone.
Snap point markers were shrunk to the knob size so it covers them.

Fixed:

  • Snapping picked the last point in range instead of the nearest, and undid itself right after.
  • The min/max labels and number field also had fixed widths that cut off longer values, so both size to their content now.

Old:

Aufzeichnung.2026-09-08.194644.mp4

New:

Aufzeichnung.2026-09-08.194533.mp4

@github-actions

github-actions Bot commented Sep 8, 2026

Copy link
Copy Markdown
Contributor

Pull request changelog

App

Added

Changed

Deprecated

Removed

Fixed

Security

Website

Added

Changed

Deprecated

Removed

Fixed

Security

Hosting

Added

Changed

Deprecated

Removed

Fixed

Security

@creeperkatze

Copy link
Copy Markdown
Contributor Author

Can of course also be tested in storybook

@Prospector

Copy link
Copy Markdown
Member

did a design pass on the sliders, here's what I came up with:

image

@IMB11

IMB11 commented Sep 9, 2026

Copy link
Copy Markdown
Member

It should be circular, as it's easier to click. The old line design was finicky/has a high miss rate

@mergify

mergify Bot commented Sep 9, 2026

Copy link
Copy Markdown

Tick the box to add this pull request to the merge queue (same as @mergifyio queue).

  • Queue this pull request

@Prospector

Copy link
Copy Markdown
Member

the click area can remain the same (though, the whole area of the bar should be clickable so width shouldn't make a difference)

@Prospector

Copy link
Copy Markdown
Member

i've implemented the new design over on #7473

@IMB11 IMB11 closed this Sep 10, 2026
@IMB11

IMB11 commented Sep 10, 2026

Copy link
Copy Markdown
Member

Whoops

@IMB11 IMB11 reopened this Sep 10, 2026
…provements

# Conflicts:
#	packages/ui/src/components/base/Slider.vue
…provements

# Conflicts:
#	packages/ui/src/components/base/Slider.vue

@Prospector Prospector left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can merge if design changes are reverted

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants