Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Vertical TrackBar

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:
  • Solid: Static appearance.
  • Blink: Fades opacity in and out.
  • Gradient: Cycles through a color spectrum.
  • Pulsate: Thumb size expands and contracts.
  • Glow: Emits a fading outer ring.
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.

Reset()
// Resets the slider value to the Minimum property.
siticoneVTrackBar1.Reset();
SaveState() & GetState()
// 1. Capture the current visual and data configuration
var state = siticoneVTrackBar1.SaveState();

// ... perform temporary changes ...

// 2. Restore the previous configuration
siticoneVTrackBar1.GetState(state);
Useful for implementing "Undo" features or switching between temporary view modes.

Events

Event Handling
// 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.

C# - EQ Fader
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.

C# - Volume Control
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.

C# - CPU Monitor
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.

C# - Alert Slider
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;
    }
}