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": true
Will deactivate a control if false is set (use 0/1 to update from Csound). Controls which are deactivated can still be updated from Csound. Any widget that has its active property set to false will allow all mouse-clicks to pass through it.
Automatable
"automatable": true
Defaults to true. 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",
"type": "number",
"range": {"min":0, "max":100, "defaultValue":0, "skew":1, "increment":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. The type is set to number by default. Each widget sets its own type, number or string.
⚠️ Important: During runtime, range objects will be appended with the current value. You should never set this value explicilty as it will override any state recall.
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).
Note on increment parameter behavior:
The increment parameter quantizes all values sent to Csound channels, ensuring they snap to the specified step size. For example, with increment: 0.1, values will be rounded to 0.0, 0.1, 0.2, etc. before reaching Csound.
The DAW host automation has additional constraints:
increment >= 1.0: The host will display discrete integer steps (e.g., move from 1 to 2 to 3, etc.) in its native controls, and enforce these steps during automation.increment < 1.0: The host displays a continuous slider. Cabbage always quantizes values internally before sending to Csound.
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. If no top level id is specified, the first channel.id will be used as the general communication channel.
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.*.
Persistence
"persistence": {
"preset": true,
"session": true
}
Controls whether a widget's state is saved in DAW presets and Csound session files. Both properties default to true.
preset: Whentrue, the widget's current value/state is included when using Csound'scabbageSaveStateopcode to save preset data. Set tofalsefor widgets that should not persist in Csound preset files (e.g., widgets that load presets).session: Whentrue, the widget's state is included when the DAW saves a preset. Set tofalsefor widgets that should not have their values loaded/saved when a DAW session loads (e.g., widgets that load presets).
Auto-cascade behavior: If you set preset to false without explicitly setting session, the system automatically sets session to false as well. This prevents state from being saved anywhere unless explicitly requested.
Popup
"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": true
A value of true will cause the widget to become invisible (use 0/1 to update from Csound). Widgets have their visibility set to true by default.
ZIndex
"zIndex": 1
Sets the stacking order of the widget. Widgets with higher zIndex values will appear in front of widgets with lower values. Default is 1.
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.visibleis true.
Example
<Cabbage>
{
"widgets": [
{ "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>