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:
|
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.
// Resets the slider value to the Minimum property.
siticoneHTrackBar1.Reset();
// 1. Capture the current visual and data configuration
var state = siticoneHTrackBar1.SaveState();
// ... perform temporary UI changes ...
// 2. Restore the previous configuration
siticoneHTrackBar1.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) =>
{
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.
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.
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.
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.
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;
}
}