Touch & Slide buttons for brightness & volume.

This is a little preset that shows how to add touch & slide buttons similar to the ones in the original control strip.
You can touch the button and immediately continue sliding to change volume/brightness. Takes less space than a real slider.

It's kind of a hack but works fine here.

Requires BTT 3.333

GestureSliderP10.bttpresetzip (29.2 KB)


I like the percentage next to the control buttons :smile:

Only i can't close the buttons.

By default they should automatically close if you release the touch. If you only tap them quickly, they should still show the x on the left side to close. Don't they?

1 Like

Yes it does :+1:

p.s. is it possible that the standard play music button opens/works with VOX player?
Would be nice in combination with Sonos.

I really like what you've done here. :+1:

This is exactly what I was looking for––I'm thrilled! At first I didn't have enough 'runway' on the touch bar to reach min/max volume and brightness, but then I changed the preset actions so they didn't make increases/decreases by "small steps" and it worked a lot better for me.

Thanks!

1 Like

OMG, thank you for the great work!!! I was looking for this for so long!

I really like the one you present. However, when I tried it on my MacBook Pro, I found that after I Iong taped the button, I could not immediately continue sliding to change volume/ brightness. instead, I had to leave my finger from the Touch Bar first, and then slide to change volume/ brightness. Do you have this problem? i appreciate for your help!

Is it possible to move the buttons further to the right?
I haven't found any options to change the position...
They are stuck alle the way on the left side for me so I can't really turn down the brightness/volume because the touch bar ends.

The brightness is showing as 0% in big sur. Any fix?

1 Like

Looks great, thanks :slight_smile:

After updating to Big Sur I noticed that the immediate sliding is not working anymore though :slight_smile:

This is great, but I wonder if the sliding could be made more sensitive, so that it increases/decreases by greater increments?

I no longer have this either, but it happened to me with a BTT update before Big Sur.

thnx to Help with BuiltInDisplayBrightness - #8 by ideasbegan here is with fixed brightness for Big Sur GestureSlider.bttpresetzip (27.6 KB)

This is great! Work perfectly at Monterey.

Thank you for that preset :slight_smile:
In my mac I was getting undefined every now and then before touching the button and I was a little annoyed by that so i changed the code a little bit - I am new at this so please don't judge it to harsh :wink:

async function brightness() {

let result = await callBTT('get_number_variable', {variable_name: 'DisplayBrightness'});


if (result === undefined) {
    returnToBTT('...')
} else {
    let percentage = result + '%';
    returnToBTT(percentage);
}

}

brightness();

a better script for both brightness 'display/kb' that updates the value regardless of how u change the brightness through (currently tested on Monterey)

how to:

  • create a script btn for each
  • copy each json > select a btn > paste the json "cmnd + v"
[
  {
    "BTTWidgetName" : "Display Brightness",
    "BTTTriggerType" : 639,
    "BTTTriggerTypeDescription" : "Apple Script \/ JavaScript Widget",
    "BTTTriggerClass" : "BTTTriggerTypeTouchBar",
    "BTTPredefinedActionType" : -1,
    "BTTPredefinedActionName" : "No Action",
    "BTTEnabled2" : 1,
    "BTTRepeatDelay" : 0,
    "BTTUUID" : "05926A9B-C25C-417D-8BA7-ABB45DBC2B2B",
    "BTTNotesInsteadOfDescription" : 0,
    "BTTEnabled" : 1,
    "BTTModifierMode" : 0,
    "BTTOrder" : 6,
    "BTTDisplayOrder" : 0,
    "BTTMergeIntoTouchBarGroups" : 0,
    "BTTTriggerConfig" : {
      "BTTTouchBarAppleScriptString" : "tell application \"BetterTouchTool\"\r\tset brightval to word 10 of (do shell script \"\/usr\/libexec\/corebrightnessdiag status-info | grep -w DisplayServicesBrightness\")\r\t\r\treturn (((round (brightval * 100)) as string) & \"%\")\rend tell",
      "BTTTouchBarItemPadding" : -10,
      "BTTTouchBarButtonColor" : "0.000000, 0.000000, 0.000000, 255.000000",
      "BTTTouchBarIconInvert" : false,
      "BTTTouchBarItemPlacement" : 0,
      "BTTTouchBarAppleScriptStringRunOnInit" : true,
      "BTTTouchBarAlwaysShowButton" : false,
      "BTTTouchBarButtonHoverColor" : "248.880000, 146.115000, 128.010000, 181.050000",
      "BTTScriptType" : 0,
      "BTTTouchBarButtonHeight" : 15,
      "BTTTouchBarButtonWidth" : 100,
      "BTTTouchBarScriptUpdateInterval" : 5,
      "BTTTouchBarItemIconHeight" : 30,
      "BTTTouchBarItemSFSymbolDefaultIcon" : "sun.max.fill",
      "BTTTouchBarButtonTextAlignment" : 0,
      "BTTTouchBarAlternateBackgroundColor" : "206.000003, 35.000002, 43.000001, 255.000000",
      "BTTTouchBarAppleScriptUsePath" : 0,
      "BTTTBWidgetWidth" : 400,
      "BTTTouchBarItemIconType" : 2,
      "BTTTouchBarColorRegex" : "^0",
      "BTTTouchBarBorderColor" : "255.000000, 255.000000, 255.000000, 255.000000",
      "BTTTouchBarItemIconWidth" : 22,
      "BTTTouchBarLongPressActionName" : "gesture - openDisplayBrightnessGroup",
      "BTTTouchBarButtonName" : "Display Brightness",
      "BTTTouchBarButtonFontSize" : 12,
      "BTTTouchBarIconTextOffset" : 5,
      "BTTTouchBarFreeSpaceBeforeButton" : 0,
      "BTTTouchBarOnlyShowIcon" : false,
      "BTTTouchBarFreeSpaceAfterButton" : 5,
      "BTTTouchBarItemSFSymbolAlternateIcon" : "sun.min"
    }
  }
]
[
  {
    "BTTWidgetName" : "KB Brightness",
    "BTTTriggerType" : 639,
    "BTTTriggerTypeDescription" : "Apple Script \/ JavaScript Widget",
    "BTTTriggerClass" : "BTTTriggerTypeTouchBar",
    "BTTPredefinedActionType" : -1,
    "BTTPredefinedActionName" : "No Action",
    "BTTEnabled2" : 1,
    "BTTRepeatDelay" : 0,
    "BTTUUID" : "F519062B-B436-4787-BAC1-DF153EF0C067",
    "BTTNotesInsteadOfDescription" : 0,
    "BTTEnabled" : 1,
    "BTTModifierMode" : 0,
    "BTTOrder" : 7,
    "BTTDisplayOrder" : 0,
    "BTTMergeIntoTouchBarGroups" : 0,
    "BTTTriggerConfig" : {
      "BTTTouchBarAppleScriptString" : "tell application \"BetterTouchTool\"\r\tset brightval to word 10 of (do shell script \"\/usr\/libexec\/corebrightnessdiag status-info | grep -w KeyboardBacklightBrightness\")\r\t\r\treturn (((round (brightval * 100)) as string) & \"%\")\rend tell",
      "BTTTouchBarItemPadding" : -10,
      "BTTTouchBarButtonColor" : "0.000000, 0.000000, 0.000000, 255.000000",
      "BTTTouchBarIconInvert" : false,
      "BTTTouchBarItemPlacement" : 0,
      "BTTTouchBarAppleScriptStringRunOnInit" : true,
      "BTTTouchBarAlwaysShowButton" : false,
      "BTTTouchBarButtonHoverColor" : "248.880000, 146.115000, 128.010000, 181.050000",
      "BTTScriptType" : 0,
      "BTTTouchBarButtonHeight" : 15,
      "BTTTouchBarButtonWidth" : 100,
      "BTTTouchBarScriptUpdateInterval" : 5,
      "BTTTouchBarItemIconHeight" : 30,
      "BTTTouchBarItemSFSymbolDefaultIcon" : "light.max",
      "BTTTouchBarButtonTextAlignment" : 0,
      "BTTTouchBarAlternateBackgroundColor" : "206.000003, 35.000002, 43.000001, 255.000000",
      "BTTTouchBarAppleScriptUsePath" : 0,
      "BTTTBWidgetWidth" : 400,
      "BTTTouchBarItemIconType" : 2,
      "BTTTouchBarColorRegex" : "^0",
      "BTTTouchBarBorderColor" : "255.000000, 255.000000, 255.000000, 255.000000",
      "BTTTouchBarItemIconWidth" : 22,
      "BTTTouchBarLongPressActionName" : "gesture - openKBBrightnessGroup",
      "BTTTouchBarButtonName" : "KB Brightness",
      "BTTTouchBarButtonFontSize" : 12,
      "BTTTouchBarIconTextOffset" : 5,
      "BTTTouchBarFreeSpaceBeforeButton" : 0,
      "BTTTouchBarOnlyShowIcon" : false,
      "BTTTouchBarFreeSpaceAfterButton" : 0,
      "BTTTouchBarItemSFSymbolAlternateIcon" : "light.min"
    }
  }
]

Hey! I'm using this preset but I'd like to update the volume icon based on the current volume status. I've referenced a handful of similar widgets/buttons that update the icon within the code, but I'm EXTREMELY unfamiliar with the code needed to do this, and have made zero progress.

Essentially, I'd like to use each of these icons (found in this icon pack) to indicate my macbook's current volume percentage

In case someone wants to help me write the code, I'm looking for the icons to match this format (referenced from left(icon 1) to right(icon 6))

  • Volume is less than or equal to 33% and status is muted; display icon 2

  • Volume is greater than or equal to 41% and status is muted; display icon 1

  • Volume = 0% and status is not muted; display icon 6

  • Volume is greater than 0% and less than or equal to 33%; display icon 4

  • Volume is greater than or equal to 34% and less than or equal to 66; display icon 5

  • Volume is greater than or equal to 67%; display icon 3

Any help is greatly appreciated :slight_smile: