HorizontalSlider

horizontalSlider allows users to adjust a value by sliding a handle horizontally. This component is useful for controlling parameters in real-time.

Properties (alphabetical)

Below is the full, alphabetical list of top-level widget properties for horizontalSlider.

Active

"active": 0

Will deactivate a control if 0 is passed. Controls which are deactivated can still be updated from Csound.

Automatable

"automatable": 1

Defaults to 1. Determines if a widget is automatable by a host DAW. Automatable widgets show up as plug-in parameters in the host. Non-automatable widgets can still communicate with Csound but are not accessible by the host. Note that hosts don't allow this parameter to change dynamically. If you change this setting, the plugin will need to be reloaded.

Bounds

"bounds": {"left":0, "top":0, "width":100, "height":100}

Integer values that set position and size on screen(in pixels).

Channel

"channels": [
                {
                    "id":"channelName", 
                    "eventType": "valueChanged",
                    "range": {"min":0, "max":100, "value":0, "skew":1, "incr":0.1}
                }
            ]

In Cabbage 3, widgets use an array of channels instead of a single channel string. Each channel object includes an id that defines a unique channel name. Widgets in Cabbage 3 can have any number of channels attached to them. An optional eventType property specifies the type of interaction. A range object can define the minimum, maximum, and default values, along with the skew and step increment.

If range is omitted, it defaults to a range from 0 to 1, with increments of 0.001 for widgets that use drag events (e.g., sliders, XY pads) and 1 for widgets that use click or toggle events (e.g., buttons, checkboxes).

A widget’s top-level id property defines the general communication channel for updating attributes, while the channels specified in the channels array are used for value and parameter updates.

Supported event types:

Event	Description
`valueChanged (default)`	Tracks simple value changes
`mousePressLeft`	Tracks presses of left mouse button
`mousePressRight`	Tracks presses of right mouse button
`mousePressMiddle`	Tracks presses of middle mouse button
`mouseMoveX`	Tracks movement along X axis.
`mouseMoveY`	Tracks movement along Y axis.
`mouseDragX`	Tracks movement along X axis with mouse pressed
`mouseDragY`	Tracks movement along Y axis with mouse pressed
`mouseInside`	Returns max when any mouse button is within the bounds of the widget, min if outside.

In Cabbage 3, channels don't need to start with a letter and white spaces are permitted.

Id

"id": "widgetId"

This optional channel can be used to define a top-level line of communication between the instrument’s UI and Csound. It is reserved for UI updates only. If omitted, it defaults to the first id from the channels array. Its primary purpose is to help produce clearer code, especially for widgets with multiple channels.

Label

"label": {
  "text": "",
  "offsetY": 0
}

Configures the widget label displayed near the control.

text: string — the label text.
offsetY: number — vertical offset applied when the label is rendered outside the control (pixels).

Typography (font size, color, family, alignment) is set via style.label.*.

"popup": 1

This property will set whether a slider's popup value box will appear. It's enabled by default.

Value Text

"valueText": {
  "visible": true,
  "width": "auto",
  "prefix": "",
  "postfix": ""
}

Controls the numeric value display area inside the slider.

visible: boolean — show/hide the value input box.
width: number | "auto" — width of the value box; auto scales from bounds.
prefix: string — optional text before the value (e.g., "Hz ").
postfix: string — optional text after the value (e.g., " dB").

When visible is true you can double-click to enter precise values; press Enter to commit.

Visible

"visible": 1

A value of 0 will cause the widget to become invisible. Widgets have their visibility set to 1 by default.

Style

"style": {
  "opacity": 1,

  "thumb": {
    "width": "auto",
    "height": "auto",
    "backgroundColor": "#0295cf",
    "borderColor": "#525252",
    "borderWidth": 2,
    "borderRadius": 4
  },

  "track": {
    "width": "auto",
    "fillColor": "#93d200",
    "backgroundColor": "#ffffff"
  },

  "label": {
    "fontFamily": "Verdana",
    "fontSize": "auto",
    "fontColor": "#dddddd",
    "textAlign": "center"
  },

  "valueText": {
    "fontFamily": "Verdana",
    "fontSize": "auto",
    "fontColor": "#dddddd"
  }
},

"auto" values are calculated from the widget bounds to scale appropriately.
Colors accept named CSS colors, hex (e.g., #RRGGBB or #RRGGBBAA), or rgb/rgba strings.
The value text input appears when valueText.visible is true.

Example

<Cabbage>
[
    {
        "type": "form",
        "caption": "Slider Example",
        "size": {"width": 520, "height": 480},
        "guiMode": "queue",
        "pluginId": "def1"
    },
    {
        "type": "verticalSlider",
        "bounds": {"left": 20, "top": 20, "width": 100, "height": 200},
        "label": {"text": "Harmonic 1"},
        "channels": [
            {"id": "harmonic1", "range": {"min": 0, "max": 1, "defaultValue": 0, "skew": 1, "increment": 0.001}}
        ]
    },
    {
        "type": "verticalSlider",
        "bounds": {"left": 130, "top": 20, "width": 100, "height": 200},
        "label": {"text": "Harmonic 2"},
        "channels": [
            {"id": "harmonic2", "range": {"min": 0, "max": 1, "defaultValue": 0, "skew": 1, "increment": 0.001}}
        ]
    },
    {
        "type": "verticalSlider",
        "bounds": {"left": 240, "top": 20, "width": 100, "height": 200},
        "label": {"text": "Harmonic 3"},
        "channels": [
            {"id": "harmonic3", "range": {"min": 0, "max": 1, "defaultValue": 0, "skew": 1, "increment": 0.001}}
        ]
    },
    {
        "type": "verticalSlider",
        "bounds": {"left": 350, "top": 20, "width": 100, "height": 200},
        "label": {"text": "Harmonic 4"},
        "channels": [
            {"id": "harmonic4", "range": {"min": 0, "max": 1, "defaultValue": 0, "skew": 1, "increment": 0.001}}
        ]
    },
    {
        "type": "verticalSlider",
        "bounds": {"left": 20, "top": 240, "width": 100, "height": 200},
        "label": {"text": "Harmonic 5"},
        "channels": [
            {"id": "harmonic5", "range": {"min": 0, "max": 1, "defaultValue": 0, "skew": 1, "increment": 0.001}}
        ]
    },
    {
        "type": "verticalSlider",
        "bounds": {"left": 130, "top": 240, "width": 100, "height": 200},
        "label": {"text": "Harmonic 6"},
        "channels": [
            {"id": "harmonic6", "range": {"min": 0, "max": 1, "defaultValue": 0, "skew": 1, "increment": 0.001}}
        ]
    },
    {
        "type": "verticalSlider",
        "bounds": {"left": 240, "top": 240, "width": 100, "height": 200},
        "label": {"text": "Harmonic 7"},
        "channels": [
            {"id": "harmonic7", "range": {"min": 0, "max": 1, "defaultValue": 0, "skew": 1, "increment": 0.001}}
        ]
    },
    {
        "type": "verticalSlider",
        "bounds": {"left": 350, "top": 240, "width": 100, "height": 200},
        "label": {"text": "Harmonic 8"},
        "channels": [
            {"id": "harmonic8", "range": {"min": 0, "max": 1, "defaultValue": 0, "skew": 1, "increment": 0.001}}
        ]
    }
]
</Cabbage>
<CsoundSynthesizer>
<CsOptions>
-n -d
</CsOptions>e
<CsInstruments>
; Initialize the global variables.
ksmps = 16
nchnls = 2
0dbfs = 1

; Rory Walsh 2021
;
; License: CC0 1.0 Universal
; You can copy, modify, and distribute this file,
; even for commercial purposes, all without asking permission.

wave@global:i = ftgen(1, 0, 4096, 10, 1, .2, .1, .2, .1)

instr 1
    
    harm1:a = oscili(tonek(cabbageGetValue:k("harmonic1"), 10), 50,  wave)
    harm2:a = oscili(tonek(cabbageGetValue:k("harmonic2"), 10), 100, wave)
    harm3:a = oscili(tonek(cabbageGetValue:k("harmonic3"), 10), 150, wave)
    harm4:a = oscili(tonek(cabbageGetValue:k("harmonic4"), 10), 200, wave)
    harm5:a = oscili(tonek(cabbageGetValue:k("harmonic5"), 10), 250, wave)
    harm6:a = oscili(tonek(cabbageGetValue:k("harmonic6"), 10), 300, wave)
    harm7:a = oscili(tonek(cabbageGetValue:k("harmonic7"), 10), 350, wave)
    harm8:a = oscili(tonek(cabbageGetValue:k("harmonic8"), 10), 400, wave)
    
    mix:a = harm1+harm2+harm3+harm4+harm5+harm6+harm7+harm8
    outs(mix*.1, mix*.1)
endin

</CsInstruments>
<CsScore>
;causes Csound to run for about 7000 years...
f0 z
;starts instrument 1 and runs it for a week
i1 0 z
</CsScore>
</CsoundSynthesizer>

Properties (alphabetical)​

Active​

Automatable​

Bounds​

Channel​

Id​

Label​

Popup​

Value Text​

Visible​

Style​

Example​