Siticone Vertical TrackBar
The SiticoneVTrackBar is a fully customizable vertical sliding control that brings modern UI/UX to Windows Forms.
It features smooth animations, extensive thumb customization (including gradients and pulsing effects), touch-friendly sizing, and comprehensive accessibility support.
Perfect for volume mixers, equalizers, and vertical scrolling interfaces.
Data & Range
Configure the slider's numeric boundaries and current position.
All value changes are animated smoothly by default unless UltraFastMode is enabled.
| Property | Type | Description & Usage Example |
|---|---|---|
Value |
int | trackBar.Value = 75; The current position of the slider. Must be within Minimum and Maximum limits. |
Minimum |
int | trackBar.Minimum = 0; The lowest possible value (bottom of the track). |
Maximum |
int | trackBar.Maximum = 100; The highest possible value (top of the track). |
Step |
int | trackBar.Step = 10; The increment/decrement value used when using keyboard navigation or context menu actions. |
Appearance & Styling
Define the visual identity of the track, thumb, and active selection fill.
| Property | Type | Description & Usage Example |
|---|---|---|
ThumbColor |
Color | trackBar.ThumbColor = Color.ForestGreen; The main color of the slider thumb handle. |
ThumbBorderColor |
Color | trackBar.ThumbBorderColor = Color.White; The color of the border ring around the thumb. |
ThumbSize |
int | trackBar.ThumbSize = 18; The diameter/thickness of the thumb handle in pixels. |
TrackColor |
Color | trackBar.TrackColor = Color.LightGray; The color of the unfilled background track. |
ElapsedTrackColor |
Color | trackBar.ElapsedTrackColor = Color.SeaGreen; The color of the active track (from bottom to thumb). |
ControlMargin |
Padding | trackBar.ControlMargin = new Padding(0); Internal padding to prevent thumb clipping at edges. |
Thumb Animations & Effects
Control dynamic behaviors of the thumb, such as pulsing or glowing, to attract attention or indicate status.
| Property | Type | Description & Usage Example |
|---|---|---|
ThumbType |
ThumbType |
trackBar.ThumbType = ThumbType.Glow;
Sets the animation mode:
|
HoverEffects |
bool | trackBar.HoverEffects = true; If true, the thumb expands slightly when hovered. |
ShadowEnabled |
bool | trackBar.ShadowEnabled = true; Draws a soft shadow beneath the thumb for depth. |
GlowColor |
Color | trackBar.GlowColor = Color.LightGreen; |
GlowSize |
int | trackBar.GlowSize = 12; The radius of the glow effect. |
Interaction & Behavior
Manage user input methods and feedback mechanisms.
| Property | Type | Description & Usage Example |
|---|---|---|
IsReadOnly |
bool | trackBar.IsReadOnly = false; When true, the slider cannot be moved by the user. Interactions trigger shake/beep feedback if enabled. |
ShowToolTip |
bool | trackBar.ShowToolTip = true; Displays a tooltip with value and shortcuts while dragging. |
ContextMenuEnabled |
bool | trackBar.ContextMenuEnabled = true; Enables the right-click menu for precise value setting. |
MouseWheelDelta |
int | trackBar.MouseWheelDelta = 5; The value change per mouse wheel tick. |
CanShake |
bool | trackBar.CanShake = true; Triggers a shake animation on invalid input (e.g., clicking a read-only slider). |
CanBeep |
bool | trackBar.CanBeep = false; Plays a system beep on invalid input. |
System & Performance
| Property | Type | Description & Usage Example |
|---|---|---|
UltraFastMode |
bool | trackBar.UltraFastMode = true; Disables all non-essential animations (Blink, transitions, shadows) to maximize FPS. Use when rendering many sliders at once (e.g., a 32-band equalizer). |
Read-Only Styling
Specific styling properties applied automatically when IsReadOnly is true.
| Property | Type | Description |
|---|---|---|
ReadOnlyThumbColor |
Color | Color of the thumb in read-only mode. |
ReadOnlyTrackColor |
Color | Color of the background track in read-only mode. |
ReadOnlyElapsedTrackColor |
Color | Color of the filled track in read-only mode. |
ReadOnlyThumbThickness |
int | Size of the thumb when in read-only mode. |
Public Methods
Programmatic control for state management and configuration.
// Resets the slider value to the Minimum property.
siticoneVTrackBar1.Reset();
// 1. Capture the current visual and data configuration
var state = siticoneVTrackBar1.SaveState();
// ... perform temporary changes ...
// 2. Restore the previous configuration
siticoneVTrackBar1.GetState(state);
Events
// 1. ValueChanged
// Fires continuously as the value updates (during animation or drag).
trackBar.ValueChanged += (s, e) =>
{
Console.WriteLine("Value updated.");
};
// 2. ValueHasChanged (Delegate)
// Provides the current integer value directly in the signature.
trackBar.ValueHasChanged += (s, val) =>
{
lblVolume.Text = val.ToString() + "%";
};
// 3. ValueChangedComplete
// Fires ONLY when the user releases the mouse button.
// Use this for heavy operations like applying database updates or filters.
trackBar.ValueChangedComplete += (s, finalVal) =>
{
SaveVolumeSetting(finalVal);
};
// 4. DynamicValueUpdated
// Fires during animation steps, useful for real-time visual feedback.
trackBar.DynamicValueUpdated += (s, e) =>
{
UpdateLivePreview(e.Value);
};
Designer Experience
Access these features via the Smart Tag panel in Visual Studio.
| Category | Features |
|---|---|
Theme Presets |
One-click styling: Default (Blue), Dark, Light, Green, Red, Orange, Purple. |
Animation Presets |
Quickly set ThumbType: Solid, Blink, Gradient, Pulsate, Glow. |
Size Presets |
Compact, Standard, Large, Extra Large configurations. |
Value Presets |
Default (0-100), Percentage, Extended (0-1000), Bipolar (-100 to 100). |
Actions |
Copy UI Settings / Paste UI Settings to duplicate styles across forms. |
Detailed Usage Examples
Example 1: Audio Equalizer Band
Creates a vertical slider styled as an equalizer fader with center-detent logic.
private SiticoneVTrackBar CreateEqFader(int bandIndex)
{
var fader = new SiticoneVTrackBar
{
Size = new Size(40, 250),
Minimum = -12,
Maximum = 12,
Value = 0,
// Visual Styling
ThumbColor = Color.FromArgb(60, 60, 60),
TrackColor = Color.FromArgb(30, 30, 30),
ElapsedTrackColor = Color.SeaGreen,
ThumbSize = 30, // Wide fader knob
// Interaction
ShowToolTip = true,
ContextMenuEnabled = true,
MouseWheelDelta = 1
};
// Handle value changes
fader.ValueChanged += (s, e) =>
{
AudioEngine.SetEqBand(bandIndex, fader.Value);
};
return fader;
}
Example 2: System Volume Control
A responsive volume slider with a gradient thumb animation that cycles colors.
private void SetupVolumeControl(SiticoneVTrackBar volumeSlider)
{
volumeSlider.Minimum = 0;
volumeSlider.Maximum = 100;
volumeSlider.Value = 50;
// Enable Gradient Animation
volumeSlider.ThumbType = ThumbType.Gradient;
volumeSlider.HoverEffects = true;
volumeSlider.ShadowEnabled = true;
// Event for UI updates
volumeSlider.ValueHasChanged += (s, val) =>
{
lblVolume.Text = val + "%";
// Change track color based on volume level
if (val > 80) volumeSlider.ElapsedTrackColor = Color.Red;
else volumeSlider.ElapsedTrackColor = Color.SeaGreen;
};
}
Example 3: Read-Only Resource Monitor
Uses the trackbar as a vertical progress bar (CPU Usage). It is read-only but reacts to clicks with a shake animation.
private SiticoneVTrackBar CreateCpuMonitor()
{
var monitor = new SiticoneVTrackBar
{
IsReadOnly = true,
CanShake = true, // Shake on click
CanBeep = false,
// Read-Only Specific Styling
ReadOnlyTrackColor = Color.FromArgb(40, 40, 40),
ReadOnlyElapsedTrackColor = Color.DodgerBlue,
ReadOnlyThumbColor = Color.White,
ReadOnlyThumbThickness = 8 // Slim profile
};
return monitor;
}
Example 4: Critical Alert Slider
Uses the Blink animation to indicate a critical system state that needs attention.
public void SetCriticalState(SiticoneVTrackBar slider, bool isCritical)
{
if (isCritical)
{
slider.ThumbType = ThumbType.Blink;
slider.ThumbColor = Color.Crimson;
slider.ElapsedTrackColor = Color.Red;
}
else
{
slider.ThumbType = ThumbType.Solid;
slider.ThumbColor = Color.SeaGreen;
slider.ElapsedTrackColor = Color.MediumSeaGreen;
}
}