Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Horizontal Slider 2

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.

Events Wiring
// 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:
  • Standard: Default Blue, Ocean Blue, Forest Green, Sunset Orange, Royal Purple.
  • Modern: Charcoal Gray, Teal, Magenta, Slate Blue.
  • Specialty: Midnight Plum, Steel Blue, Firebrick.
Value Ranges Quickly set common ranges:
  • 0 to 100: Standard percentage range.
  • -100 to 100: Bipolar range centered at 0.
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.

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

C# - Progress Display
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.

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