[GH-ISSUE #258] Redesign sliders to reflect Big Sur Control Center's brightness and volume sliders #200

Closed
opened 2026-05-05 05:23:08 -06:00 by gitea-mirror · 19 comments
Owner

Originally created by @waydabber on GitHub (Jul 11, 2020).
Original GitHub issue: https://github.com/MonitorControl/MonitorControl/issues/258

Originally assigned to: @waydabber on GitHub.

Big Sur has a new Control Center with a dedicated brightness slider which is always present even when the display does not support brightness control and cannot be removed.

Screen Shot 2020-07-11 at 10 39 46

The brightness control can also be added as a stand alone taskbar item:

Screen Shot 2020-07-11 at 10 50 06

If hooking up MonitorControl with this slider is not possible it'd be nice for MonitorControl to mimic the design of the standalone display control as close as allowed for a more organic, "integrated" feel.

Originally created by @waydabber on GitHub (Jul 11, 2020). Original GitHub issue: https://github.com/MonitorControl/MonitorControl/issues/258 Originally assigned to: @waydabber on GitHub. Big Sur has a new Control Center with a dedicated brightness slider which is always present even when the display does not support brightness control and cannot be removed. <img width="309" alt="Screen Shot 2020-07-11 at 10 39 46" src="https://user-images.githubusercontent.com/37590873/87220405-a4a9ee00-c363-11ea-8dd9-b43483695352.png"> The brightness control can also be added as a stand alone taskbar item: <img width="317" alt="Screen Shot 2020-07-11 at 10 50 06" src="https://user-images.githubusercontent.com/37590873/87220473-53e6c500-c364-11ea-92c9-29a046fba050.png"> If hooking up MonitorControl with this slider is not possible it'd be nice for MonitorControl to mimic the design of the standalone display control as close as allowed for a more organic, "integrated" feel.
gitea-mirror 2026-05-05 05:23:08 -06:00
Author
Owner

@extric99 commented on GitHub (Aug 19, 2020):

@waydabber Does brightness control work for you on BigSur? On my Dell U2720Q only contrast slider is working while under Catalina both work fine..

<!-- gh-comment-id:676707632 --> @extric99 commented on GitHub (Aug 19, 2020): @waydabber Does brightness control work for you on BigSur? On my Dell U2720Q only contrast slider is working while under Catalina both work fine..
Author
Owner

@waydabber commented on GitHub (Aug 19, 2020):

@extric99 Yes, it is working. I am using an eGPU though, the issue might be adapter specific.

<!-- gh-comment-id:676718610 --> @waydabber commented on GitHub (Aug 19, 2020): @extric99 Yes, it is working. I am using an eGPU though, the issue might be adapter specific.
Author
Owner

@kevinjohncutler commented on GitHub (Sep 23, 2020):

+1, this would be excellent. Also should implement the volume control slider at the same time!

<!-- gh-comment-id:697956514 --> @kevinjohncutler commented on GitHub (Sep 23, 2020): +1, this would be excellent. Also should implement the volume control slider at the same time!
Author
Owner

@jtbandes commented on GitHub (Feb 22, 2021):

I found some private APIs that work for adjusting brightness on Big Sur — though I only tested for my M1 MacBook Air's built-in display. But maybe it will help for MonitorControl as well. I wrote more about it here: https://github.com/Hammerspoon/hammerspoon/issues/2668#issuecomment-782905780.

<!-- gh-comment-id:782993337 --> @jtbandes commented on GitHub (Feb 22, 2021): I found some private APIs that work for adjusting brightness on Big Sur — though I only tested for my M1 MacBook Air's built-in display. But maybe it will help for MonitorControl as well. I wrote more about it here: https://github.com/Hammerspoon/hammerspoon/issues/2668#issuecomment-782905780.
Author
Owner

@gferreroferri commented on GitHub (Mar 15, 2021):

I vote for this!

<!-- gh-comment-id:799182274 --> @gferreroferri commented on GitHub (Mar 15, 2021): I vote for this!
Author
Owner

@waydabber commented on GitHub (Aug 19, 2021):

Well since now I am a developer of monitorControl now, I'll addign this to myself. Would have to build a custom slider for that though so this will not happen any time soon. :)

<!-- gh-comment-id:901694425 --> @waydabber commented on GitHub (Aug 19, 2021): Well since now I am a developer of monitorControl now, I'll addign this to myself. Would have to build a custom slider for that though so this will not happen any time soon. :)
Author
Owner

@JoniVR commented on GitHub (Sep 7, 2021):

I can take a go at this when I get the time, I tried recreating it with SwiftUI a few days ago but SwiftUI doesn't seem very usable with build scripts or generally in the project. Shame though as it seems like an ideal use-case for this.

<!-- gh-comment-id:914400961 --> @JoniVR commented on GitHub (Sep 7, 2021): I can take a go at this when I get the time, I tried recreating it with SwiftUI a few days ago but SwiftUI doesn't seem very usable with build scripts or generally in the project. Shame though as it seems like an ideal use-case for this.
Author
Owner

@waydabber commented on GitHub (Sep 7, 2021):

I was looking into it myself as well but was quickly discouraged lol. :)

<!-- gh-comment-id:914415238 --> @waydabber commented on GitHub (Sep 7, 2021): I was looking into it myself as well but was quickly discouraged lol. :)
Author
Owner

@JoniVR commented on GitHub (Sep 7, 2021):

I was getting fairly close manipulating the default slider but I couldn't get it stable so seems like it'll probably be a custom AppKit component.

<!-- gh-comment-id:914415977 --> @JoniVR commented on GitHub (Sep 7, 2021): I was getting fairly close manipulating the default slider but I couldn't get it stable so seems like it'll probably be a custom AppKit component.
Author
Owner

@waydabber commented on GitHub (Sep 15, 2021):

Part of redesigning the slider could be adding scroll wheel (magic mouse swipe) support to the slider:

https://github.com/MonitorControl/MonitorControl/discussions/592

It indeed works in Control Center but it is not a standard thing for NSSlider.

<!-- gh-comment-id:920214301 --> @waydabber commented on GitHub (Sep 15, 2021): Part of redesigning the slider could be adding scroll wheel (magic mouse swipe) support to the slider: https://github.com/MonitorControl/MonitorControl/discussions/592 It indeed works in Control Center but it is not a standard thing for NSSlider.
Author
Owner

@waydabber commented on GitHub (Sep 19, 2021):

Scrolling/swiping now works on sliders - see https://github.com/MonitorControl/MonitorControl/issues/601.

<!-- gh-comment-id:922524775 --> @waydabber commented on GitHub (Sep 19, 2021): Scrolling/swiping now works on sliders - see https://github.com/MonitorControl/MonitorControl/issues/601.
Author
Owner

@waydabber commented on GitHub (Sep 22, 2021):

This seems to be harder than I thought. I can customize NSSlider to look like we want but I can't get around the fact that during mouse tracking the slider wants to redraw only the part that is near the knob and the original slider bar area only (dirtyRect). This is problematic because we want the full background to redraw because of the filled white bar left of the knob. If one moves the mouse too fast, then artifacts happen and don't go away until mouse release when the entire control is redrawn.

<!-- gh-comment-id:925039699 --> @waydabber commented on GitHub (Sep 22, 2021): This seems to be harder than I thought. I can customize NSSlider to look like we want but I can't get around the fact that during mouse tracking the slider wants to redraw only the part that is near the knob and the original slider bar area only (dirtyRect). This is problematic because we want the full background to redraw because of the filled white bar left of the knob. If one moves the mouse too fast, then artifacts happen and don't go away until mouse release when the entire control is redrawn.
Author
Owner

@JoniVR commented on GitHub (Sep 22, 2021):

I had crossed the same problem using NSSlider customisation, I think an approach that might work is using SwiftUI without preview (basically just building like we do now) since preview doesn't work properly, or just building it fully custom in AppKit, though I think that's probably harder than SwiftUI.

<!-- gh-comment-id:925067805 --> @JoniVR commented on GitHub (Sep 22, 2021): I had crossed the same problem using NSSlider customisation, I think an approach that might work is using SwiftUI without preview (basically just building like we do now) since preview doesn't work properly, or just building it fully custom in AppKit, though I think that's probably harder than SwiftUI.
Author
Owner

@waydabber commented on GitHub (Sep 22, 2021):

I think we should just leave this as it is. I created a custom slider to fix the tick mark issue in dark mode and also to have the ability to show more than one display on a single slider in combined slider mode when keyboard and apple brightness syncing is not enabled (in this case multiple displays can have different brightnesses but there is one slider). It looks kinda funny but I like it:

Screen Shot 2021-09-22 at 21 24 42

Here is with the tick mark style:

Screen Shot 2021-09-22 at 21 25 07

When apple brightness syncing is active (ambient light sensor or touch bar is used), the various knobs can move in unison while keeping their distance which looks cool.

<!-- gh-comment-id:925276831 --> @waydabber commented on GitHub (Sep 22, 2021): I think we should just leave this as it is. I created a custom slider to fix the tick mark issue in dark mode and also to have the ability to show more than one display on a single slider in combined slider mode when keyboard and apple brightness syncing is not enabled (in this case multiple displays can have different brightnesses but there is one slider). It looks kinda funny but I like it: <img width="300" alt="Screen Shot 2021-09-22 at 21 24 42" src="https://user-images.githubusercontent.com/37590873/134411373-fc9b698d-fe36-4f98-89d5-ad63f84dd047.png"> Here is with the tick mark style: <img width="280" alt="Screen Shot 2021-09-22 at 21 25 07" src="https://user-images.githubusercontent.com/37590873/134411451-bcaf1f2a-7c46-46bd-a0a5-8a1d6c0aafb0.png"> When apple brightness syncing is active (ambient light sensor or touch bar is used), the various knobs can move in unison while keeping their distance which looks cool.
Author
Owner

@waydabber commented on GitHub (Sep 23, 2021):

All right we should not abandon it. I was just angry at this thing yesterday. :)

<!-- gh-comment-id:925585290 --> @waydabber commented on GitHub (Sep 23, 2021): All right we should not abandon it. I was just angry at this thing yesterday. :)
Author
Owner

@waydabber commented on GitHub (Sep 23, 2021):

Ok, it seems like I found an easy solution to the artifact problem. Why did I spend so much wasted time on this yesterday and did not find the solution is beyond me... :/

<!-- gh-comment-id:925615899 --> @waydabber commented on GitHub (Sep 23, 2021): Ok, it seems like I found an easy solution to the artifact problem. Why did I spend so much wasted time on this yesterday and did not find the solution is beyond me... :/
Author
Owner

@waydabber commented on GitHub (Sep 23, 2021):

(the solution is that you can simply override the function that defines the bar rectangle and if you do that then dirtyRect will honor this apparently and will redraw everything as intended. It should have been obvious from the start but I somehow missed it.)

<!-- gh-comment-id:925619091 --> @waydabber commented on GitHub (Sep 23, 2021): (the solution is that you can simply override the function that defines the bar rectangle and if you do that then dirtyRect will honor this apparently and will redraw everything as intended. It should have been obvious from the start but I somehow missed it.)
Author
Owner

@waydabber commented on GitHub (Sep 23, 2021):

Screen Shot 2021-09-23 at 21 30 04 Screen Shot 2021-09-23 at 21 29 54

😎

I even replicated the shadow and the way the knob slowly fades away as it is getting closer to the icon.

<!-- gh-comment-id:925931272 --> @waydabber commented on GitHub (Sep 23, 2021): <img width="290" alt="Screen Shot 2021-09-23 at 21 30 04" src="https://user-images.githubusercontent.com/37590873/134571771-a0cb4607-ad34-469f-bd31-01005dccc756.png"> <img width="280" alt="Screen Shot 2021-09-23 at 21 29 54" src="https://user-images.githubusercontent.com/37590873/134571784-05d3b929-85e2-40a2-8c54-3991c6f97233.png"> 😎 I even replicated the shadow and the way the knob slowly fades away as it is getting closer to the icon.
Author
Owner

@waydabber commented on GitHub (Sep 23, 2021):

The control can also display a range (if there are multiple displays combined into a single slider and syncing stuff is disabled). If there are more than 2 displays then small dots will signify each display's location on the slider.

Screen Shot 2021-09-23 at 21 30 22
<!-- gh-comment-id:926095974 --> @waydabber commented on GitHub (Sep 23, 2021): The control can also display a range (if there are multiple displays combined into a single slider and syncing stuff is disabled). If there are more than 2 displays then small dots will signify each display's location on the slider. <img width="265" alt="Screen Shot 2021-09-23 at 21 30 22" src="https://user-images.githubusercontent.com/37590873/134571877-16e5aef3-480c-430e-a899-1ce1df1af55a.png">
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/MonitorControl#200
No description provided.