Siticone HSlider2
The SiticoneHSlider2 is a modern, high-performance horizontal slider control.
It features smooth animations for thumb movement and color transitions, haptic-like visual feedback,
and comprehensive event handling. It is designed to replace standard trackbars with a visually
appealing and highly customizable alternative suitable for modern WinForms applications.
Core Value Properties
Fundamental properties that control the slider's range, current value, and basic behavior.
| Property | Type | Description & Usage Example |
|---|---|---|
Value |
int | slider.Value = 75; The current position of the slider thumb. Must be between Minimum and Maximum. |
Minimum |
int | slider.Minimum = 0; The lower bound of the slider's range. |
Maximum |
int | slider.Maximum = 100; The upper bound of the slider's range. |
SmallChange |
int | slider.SmallChange = 1; The amount the value changes when using the arrow keys. |
LargeChange |
int | slider.LargeChange = 10; The amount the value changes when using PageUp/PageDown keys. |
MouseWheelChange |
int | slider.MouseWheelChange = 5; The increment/decrement value when scrolling the mouse wheel. |
Appearance & Dimensions
Customize the physical dimensions of the track and thumb to fit your UI design.
| Property | Type | Description & Usage Example |
|---|---|---|
Padding |
Padding | slider.Padding = new Padding(10, 0, 10, 0); Internal spacing providing a safe area for the thumb at the edges of the control. |
ThumbWidth |
int | slider.ThumbWidth = 20; The width of the draggable thumb element. |
ThumbHeight |
int | slider.ThumbHeight = 20; The height of the draggable thumb element. |
ThumbBorderSize |
int | slider.ThumbBorderSize = 2; The thickness of the border drawn around the thumb. |
TrackHeight |
int | slider.TrackHeight = 6; The thickness (height) of the background track. |
Colors & Styling
Properties to define the visual palette of the slider in its various states (Normal, Hover, Pressed, and Read-Only).
| Property | Type | Description & Usage Example |
|---|---|---|
FillColor |
Color | slider.FillColor = Color.DodgerBlue; The color of the active portion of the track (left of the thumb). |
TrackColor |
Color | slider.TrackColor = Color.LightGray; The color of the inactive portion of the track (right of the thumb). |
ThumbColor |
Color | slider.ThumbColor = Color.DodgerBlue; The default color of the thumb. |
ThumbHoverColor |
Color | slider.ThumbHoverColor = Color.SkyBlue; The color of the thumb when the mouse pointer is over it. |
ThumbDownColor |
Color | slider.ThumbDownColor = Color.Blue; The color of the thumb while it is being dragged. |
ThumbBorderColor |
Color | slider.ThumbBorderColor = Color.White; The color of the border around the thumb. |
ReadOnlyFillColor |
Color |
slider.ReadOnlyFillColor = Color.Gray;
The track fill color when IsReadOnly is true.
|
ReadOnlyTrackColor |
Color |
slider.ReadOnlyTrackColor = Color.Silver;
The background track color when IsReadOnly is true.
|
Animations & Performance
Control the visual effects and performance characteristics of the slider.
| Property | Type | Description & Usage Example |
|---|---|---|
ThumbAnimation |
ThumbAnimation |
slider.ThumbAnimation = ThumbAnimation.Blink;
Determines the visual effect of the thumb. Options: Normal, ColorTransition, Blink.
|
UltraFastMode |
bool | slider.UltraFastMode = true; When enabled, disables all non-essential animations (blinking, smooth sliding) for maximum performance. Ideal for high-frequency updates or low-end hardware. |
Interaction & Feedback
Manage how the user interacts with the slider and the feedback they receive.
| Property | Type | Description & Usage Example |
|---|---|---|
IsReadOnly |
bool | slider.IsReadOnly = true; If true, the user cannot change the value, but the control remains visible. Useful for displaying progress or fixed values. |
KeyboardEnabled |
bool | slider.KeyboardEnabled = true; Allows changing value via Arrow keys, PageUp/Down, Home/End. |
MouseWheelEnabled |
bool | slider.MouseWheelEnabled = true; Allows changing value via the mouse wheel scroll. |
CanShake |
bool | slider.CanShake = true; If true, the slider shakes visually when a user tries to change the value in Read-Only mode. |
CanBeep |
bool | slider.CanBeep = true; If true, plays a system beep when a user tries to change the value in Read-Only mode. |
Events
Comprehensive event system for tracking slider interactions and value changes.
// 1. ValueChanged Event
// Fires whenever the 'Value' property changes.
// Provides access to OldValue and NewValue.
slider.ValueChanged += (s, e) =>
{
Console.WriteLine($"Value changed from {e.OldValue} to {e.NewValue}");
};
// 2. Scroll Event
// Fires continuously as the thumb is being moved.
slider.Scroll += (s, e) =>
{
Console.WriteLine($"Scrolling: {e.NewValue}");
};
// 3. ValueChangeStarted / ValueChangeCompleted
// Useful for undo/redo logic or batching updates.
slider.ValueChangeStarted += (s, e) => Console.WriteLine("Interaction started");
slider.ValueChangeCompleted += (s, e) => Console.WriteLine($"Interaction done. Final value: {e.NewValue}");
// 4. ReadOnlyAttempt
// Fires when a user tries to interact with a ReadOnly slider.
slider.ReadOnlyAttempt += (s, e) =>
{
MessageBox.Show("This setting is locked by administrator.");
};
// 5. TrackClick
// Fires when the track is clicked (not the thumb).
slider.TrackClick += (s, e) =>
{
Console.WriteLine($"Clicked at value: {e.ValueAtClick}");
};
Designer & Smart Tags
The SiticoneHSlider2 includes robust design-time support to speed up development.
| Feature | Description |
|---|---|
Theme Presets |
Apply complete color schemes instantly via the Smart Tag menu:
|
Value Ranges |
Quickly set common ranges:
|
Settings Clipboard |
Copy Settings: Copies all slider visual properties. Paste Settings: Applies copied settings to another slider instance. |
Detailed Usage Examples
Example 1: Volume Control
A standard volume slider with custom colors and mouse wheel support.
private void InitializeVolumeSlider()
{
var volSlider = new SiticoneHSlider2();
volSlider.Minimum = 0;
volSlider.Maximum = 100;
volSlider.Value = 50;
// Appearance
volSlider.FillColor = Color.MediumSeaGreen;
volSlider.ThumbColor = Color.SeaGreen;
volSlider.TrackHeight = 8;
// Interaction
volSlider.MouseWheelEnabled = true;
volSlider.MouseWheelChange = 5;
volSlider.SmallChange = 2;
// Handle Volume Change
volSlider.ValueChanged += (s, e) =>
{
SetSystemVolume(e.NewValue);
};
this.Controls.Add(volSlider);
}
Example 2: Read-Only Progress Display
Using the slider as a progress bar that shakes if the user tries to modify it.
private void SetupProgressSlider()
{
var progressSlider = new SiticoneHSlider2();
// Lock the slider
progressSlider.IsReadOnly = true;
// Enable feedback so user knows it's locked
progressSlider.CanShake = true;
progressSlider.CanBeep = false;
// Visuals for Read-Only state
progressSlider.ReadOnlyFillColor = Color.Orange;
progressSlider.ReadOnlyTrackColor = Color.FromArgb(64, 64, 64);
// Update progress programmatically
Timer t = new Timer { Interval = 100 };
t.Tick += (s, e) =>
{
if (progressSlider.Value < 100)
progressSlider.Value++;
else
t.Stop();
};
t.Start();
}
Example 3: Color Transition Effect
Enabling the built-in color cycle animation for the thumb.
private void EnableDiscoMode()
{
// Enables a smooth color cycling animation on the thumb
mySlider.ThumbAnimation = ThumbAnimation.ColorTransition;
// Ensure UltraFastMode is OFF, otherwise animations won't play
mySlider.UltraFastMode = false;
}
private void EnableBlinkMode()
{
// Makes the thumb fade in and out
mySlider.ThumbAnimation = ThumbAnimation.Blink;
}