Component: Slider

The slider component creates an interactive, draggable slider. It's perfect for controlling continuous values like system volume or screen brightness directly from your bar.

Creation

You create a slider using the --add slider command.

# Syntax: sketchybar --add slider <name> <position> <width>

sketchybar --add slider volume.slider right 100
  • <name>: A unique name for the slider item.
  • <position>: left, center, or right.
  • <width>: The width of the slider track in points.

Anatomy of a Slider

A slider is composed of three main parts:

  1. Background: The main track of the slider.
  2. Foreground (Highlight): The part of the track that is "filled in", representing the current value.
  3. Knob: An optional icon or text that indicates the current position on the slider.

Slider-Specific Properties

Sliders have their own set of properties in addition to standard item properties.

  • slider.width=<INT>: Sets the width of the slider track.
  • slider.percentage=<0-100>: Sets the current value of the slider. This determines the width of the highlight and the position of the knob.
  • slider.highlight_color=<HEX_COLOR>: Sets the color of the foreground/highlighted part of the track.
  • slider.knob=<STRING>: Sets the icon or text for the draggable knob.
  • slider.knob.drawing=<on|off>: Toggles the visibility of the knob.

All background properties (e.g., background.color, background.corner_radius) apply to both the main track and the highlight track.

All icon/label properties (e.g., icon.font, icon.color) are prefixed with slider.knob.* when applied to the knob (e.g., slider.knob.font, slider.knob.color).

Interaction and Scripting

The slider's true power comes from scripting.

  1. Setting the Initial Value: You should subscribe the slider to an event (like volume_change) to set its initial slider.percentage.
  2. Reacting to Clicks/Drags: When a user clicks or drags the slider, its slider.percentage property is automatically updated internally. You can then use a click_script to read this new percentage and perform an action, like changing the system volume.

Example: A Volume Slider

  1. Create the slider and subscribe it to volume_change: 

    sketchybar --add slider volume.slider right 100 \
           --set volume.slider \
                 slider.width=100 \
                 slider.highlight_color=0xffb4befe \
                 slider.background.color=0xff313244 \
                 slider.knob= \
                 script="$PLUGIN_DIR/volume_change.sh" \
                 click_script="osascript -e 'set volume output volume $PERCENTAGE'" \
           --subscribe volume.slider volume_change

  2. Create the update script (volume_change.sh): This script runs when the system volume changes, ensuring the slider stays in sync. 

    #!/bin/sh
# The volume_change event sends the new volume in the $INFO variable.
sketchybar --set $NAME slider.percentage=$INFO

  3. The click_script: When the slider is clicked or dragged, the click_script is executed. SketchyBar automatically provides the new percentage in the $PERCENTAGE environment variable. 

    # This command sets the system volume to the slider's new percentage.
osascript -e 'set volume output volume $PERCENTAGE'