Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Horizontal TrackBar

Siticone Horizontal TrackBar

The SiticoneHTrackBar is a premium horizontal sliding control that enhances standard WinForms capabilities with modern Material Design aesthetics, fluid animations, and advanced state management. It features customizable thumb animations (Blink, Gradient, Pulsate), haptic-like visual feedback, and comprehensive read-only states.

Data & Range

Define the numeric boundaries and precision of the trackbar.

Property Type Description & Usage Example
Value int trackBar.Value = 60; The current position of the slider thumb. Setting this property triggers animation to the new value unless disabled.
Minimum int trackBar.Minimum = 0; The lowest possible value of the range.
Maximum int trackBar.Maximum = 255; The highest possible value of the range.
Step int trackBar.Step = 10; The increment/decrement value used when using keyboard navigation (Arrow keys).

Appearance & Visual Style

Customize the look of the track, thumb, and active selection area.

Property Type Description & Usage Example
TrackColor Color trackBar.TrackColor = Color.LightGray; The color of the background track (the unfilled portion).
ElapsedTrackColor Color trackBar.ElapsedTrackColor = Color.SeaGreen; The color of the active track (from Minimum to current Value).
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 = 20; The diameter of the thumb handle in pixels.
ControlMargin Padding trackBar.ControlMargin = new Padding(10, 0, 10, 0); Internal padding to prevent the thumb from clipping at the start/end of the track.

Thumb Animations & Effects

Controls 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.Pulsate; 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 the mouse hovers over it.
ShadowEnabled bool trackBar.ShadowEnabled = true; Draws a soft shadow beneath the thumb for depth.
GlowColor Color trackBar.GlowColor = Color.FromArgb(100, Color.Cyan);
GlowSize int trackBar.GlowSize = 15; The radius of the glow effect (active when ThumbType.Glow is set).

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 the current value and keyboard shortcuts while dragging.
MouseWheelDelta int trackBar.MouseWheelDelta = 5; The amount value changes when scrolling the mouse wheel.
CanShake bool trackBar.CanShake = true; Triggers a horizontal shake animation if the user attempts to move a ReadOnly slider.
CanBeep bool trackBar.CanBeep = false; Plays a system beep on invalid input.

Read-Only Styling

Specific styling properties applied automatically when IsReadOnly is true, allowing visually distinct "locked" states.

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.
ReadOnlyThumbSize int Size of the thumb when in read-only mode (often smaller to indicate non-interactivity).

Public Methods

Programmatic control for state management and configuration.

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

// ... perform temporary UI changes ...

// 2. Restore the previous configuration
siticoneHTrackBar1.GetState(state);
Ideal for implementing "Undo" operations 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) => 
{
    lblPercentage.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) => 
{
                ApplyImageFilter(finalVal);
};

// 4. DynamicValueUpdated
// Fires during animation steps, useful for real-time visual feedback.
trackBar.DynamicValueUpdated += (s, e) => 
{
                UpdatePreviewOpacity(e.Value);
};

Designer Experience

Access these features via the Smart Tag panel in Visual Studio.

Category Features
Theme Presets One-click styling: Default (Purple), Dark, Light, Blue, Green, Red.
Animation Presets Quickly set ThumbType: Solid, Blink, Gradient, Pulsate, Glow.
Size Presets Thin, Standard, Wide, Extra Wide 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: Gradient Range Slider

Creates a visual slider that cycles through colors, useful for RGB color pickers or temperature controls.

C# - Gradient Slider
private SiticoneHTrackBar CreateGradientSlider()
{
                var slider = new SiticoneHTrackBar
    {
        Size = new Size(300, 40),
        Minimum = 0,
        Maximum = 255,
        Value = 128,
        
                // Enable Gradient Animation on Thumb
        ThumbType = ThumbType.Gradient, 
        ThumbSize = 24,
        
                // Visual Styling
        TrackColor = Color.FromArgb(230, 230, 230),
        ElapsedTrackColor = Color.DarkGray,
        ShadowEnabled = true,
        
                // Interaction
        ShowToolTip = true,
        HoverEffects = true
    };

                // Update background color in real-time
    slider.ValueHasChanged += (s, val) => 
    {
        panelPreview.BackColor = Color.FromArgb(val, 100, 150);
    };

                return slider;
}

Example 2: Media Player Progress Bar

Uses ValueChangedComplete to seek video only after the user stops dragging, ensuring smooth scrubbing.

C# - Media Scrubber
private void SetupMediaScrubber(SiticoneHTrackBar scrubber)
{
    scrubber.Minimum = 0;
    scrubber.Maximum = 100; // Represents percentage
    
                // Dragging updates the time label immediately
    scrubber.ValueChanged += (s, e) =>
    {
                double time = (_totalDuration * scrubber.Value) / 100.0;
        lblTime.Text = TimeSpan.FromSeconds(time).ToString(@"mm\:ss");
    };

                // Release updates the actual video position
    scrubber.ValueChangedComplete += (s, finalVal) =>
    {
                MediaPlayer.SeekToPosition(finalVal);
    };
    
                // Use Glow effect to indicate active state
    scrubber.ThumbType = ThumbType.Glow;
    scrubber.GlowColor = Color.MediumPurple;
}

Example 3: Read-Only System Gauge

A read-only trackbar acting as a CPU usage indicator. It shakes if clicked to indicate it is non-interactive.

C# - CPU Indicator
private SiticoneHTrackBar CreateCpuGauge()
{
                var gauge = new SiticoneHTrackBar
    {
        IsReadOnly = true,
        CanShake = true, // Feedback on click
        
                // Read-Only Specific Styling
        ReadOnlyTrackColor = Color.FromArgb(50, 50, 50),
        ReadOnlyElapsedTrackColor = Color.OrangeRed,
        ReadOnlyThumbColor = Color.White,
        ReadOnlyThumbSize = 10 // Smaller thumb for display-only
    };

                return gauge;
}

Example 4: Pulsating Notification Slider

Uses the Pulsate animation to draw attention to a critical setting.

C# - Pulsating Alert
public void SetCriticalMode(SiticoneHTrackBar slider, bool isCritical)
{
                if (isCritical)
    {
        slider.ThumbType = ThumbType.Pulsate;
        slider.ThumbColor = Color.Crimson;
        slider.ElapsedTrackColor = Color.Red;
    }
                else
    {
        slider.ThumbType = ThumbType.Solid;
        slider.ThumbColor = Color.SeaGreen;
        slider.ElapsedTrackColor = Color.MediumSeaGreen;
    }
}