Skip to content
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.

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

Slider redesign #214

Merged
merged 11 commits into from
Dec 4, 2020
Merged

Slider redesign #214

merged 11 commits into from
Dec 4, 2020

Conversation

DevCharly
Copy link
Collaborator

This PR brings some visual changes to the slider (which makes it look beautiful IMHO)
and adds more possibilities to customize slider design.

This is the new default look (compared to old look):

image

Changes:

  • the track is thinner
  • the thumb 1px larger
  • thumb (and left side of track) is always "blue", which makes it easier to recognize
  • when focused, a "thick" border is painted around the thumb (inspired by material design)
  • hover and pressed feedback on thumb
  • height changed from 11 to 20 (without ticks and labels)
  • customizable

Here are some examples to customize the look:

For Windows 10 style slider use:

UIManager.put( "Slider.thumbSize", new Dimension( 8, 24 )  );

image

For macOS style slider use:

UIManager.put( "Slider.thumbColor", Color.white );
UIManager.put( "Slider.thumbBorderColor", UIManager.getColor( "Component.borderColor" ) );

image

For thicker focus indicator (as in material design) use:

UIManager.put( "Slider.focusWidth", 8 );

image

JIDE RangeSlider also uses new look and same customizing:

image

- hover feedback only when mouse is over thumb
- pressed feedback added
- separate disabled colors for track and thumb
- made private fields protected
- updated with latest changes from FlatSliderUI
- use static FlatSliderUI methods for thumb painting
- hover/pressed feedback on single thumb
- hover/pressed feedback on middle track and both thumbs
- added JSlider components to FlatRangeSliderTest for easier testing/comparing
- changed default color to bluish
- made track thinner (2px, was 3px)
- made thumb larger (12px, was 11px)
- added thumb outline focus indicator (4px wide)
- slider component height increased from 11px to 20px
- support painting thumb border
- support different colors for thumb background and colored track
- compute useful baseline for horizontal orientation so that the track is vertically centered
- no baseline for vertical orientation
…on-square sized thumbs (as used in Windows 10)
- needle of directional thumb was not painted while dragging
- artifacts on HiDPI screen while dragging
- cut off focus indicator on HiDPI screen
@DevCharly DevCharly added this to the 0.45 milestone Nov 25, 2020
@DevCharly
Copy link
Collaborator Author

Forgot to mention that the slider now returns a "useful" baseline to vertically align a label and the slider track when using a layout manager that supports baselines (MigLayout or GridBagLayout).

Notice how the label and the slider track are vertically aligned:

image

And this is what Windows Laf (and all other Lafs) do (not very useful IMHO):

image

As workaround (in Windows Laf), you can align the row to the top, which looks much better, but not perfect:
image

@DevCharly DevCharly merged commit dd2f73e into master Dec 4, 2020
@DevCharly DevCharly deleted the slider-redesign branch December 4, 2020 21:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant