Siticone Horizontal Range TrackBar

The SiticoneHRangeTrackBar is a premium horizontal sliding control featuring dual thumbs (Lower and Upper) for selecting a range of values. Perfect for filtering prices, time intervals, or any numeric brackets, this control combines Material Design aesthetics with fluid animations, context-aware tooltips, and precise keyboard control.

Values & Range

Configure the numeric limits and the currently selected interval. The control enforces logical constraints so LowerValue never exceeds UpperValue.

Property	Type	Description & Usage Example
`LowerValue`	int	hRange.LowerValue = 10; The value of the left thumb (start of the range).
`UpperValue`	int	hRange.UpperValue = 90; The value of the right thumb (end of the range).
`Minimum`	int	hRange.Minimum = 0; The absolute start value of the track.
`Maximum`	int	hRange.Maximum = 100; The absolute end value of the track.
`Step`	int	hRange.Step = 5; The increment/decrement step when using keyboard navigation or the mouse wheel.
`ValuesDifference`	int	int rangeSize = hRange.ValuesDifference; A read-only property returning the span between upper and lower values.

Appearance & Styling

Customize the visual identity of the track, thumbs, and selection highlight.

Property	Type	Description & Usage Example
`ThumbColor`	Color	hRange.ThumbColor = Color.MediumSeaGreen; The color of the thumbs in their idle state.
`ThumbHoverColor`	Color	hRange.ThumbHoverColor = Color.SeaGreen; The color of a thumb when hovered or pressed.
`SelectedRangeColor`	Color	hRange.SelectedRangeColor = Color.LimeGreen; The color of the active track segment connecting the two thumbs.
`TrackColor`	Color	hRange.TrackColor = Color.WhiteSmoke; The background color of the unfilled track.
`ThumbRadius`	int	hRange.ThumbRadius = 12; The radius (size) of the thumb handles.
`TrackHeight`	int	hRange.TrackHeight = 6; The vertical thickness of the slider track.

Labels & Tick Marks

Enhance readability with value labels and ruler-like tick marks along the track.

Property	Type	Description & Usage Example
`ShowValueLabels`	bool	hRange.ShowValueLabels = true; Automatically draws the current numeric value above each thumb.
`ValueLabelFont`	Font	hRange.ValueLabelFont = new Font("Segoe UI", 9f); The typography used for the floating value labels.
`ShowTickMarks`	bool	hRange.ShowTickMarks = true; Displays tick marks along the bottom of the track.
`TickFrequency`	int	hRange.TickFrequency = 10; The interval at which tick marks are drawn (e.g., every 10 units).
`SnapToTick`	bool	hRange.SnapToTick = true; If enabled, thumbs snap to the nearest tick mark when dragged or released.

Layout & Padding

Property	Type	Description & Usage Example
`Padding`	Padding	hRange.Padding = new Padding(15, 0, 15, 0); Determines the safe area inside the control. Increase left/right padding if large thumbs are being clipped at the edges.

Events

The control exposes dedicated events for monitoring changes to either end of the range. Arguments include the new value and the current range span.

Event Handling

// 1. Lower Value Changed
hRange.LowerValueChanged += (sender, e) =>
{
                Console.WriteLine($"Start Value: {e.Value}");
                Console.WriteLine($"Current Span: {e.ValuesDifference}");
    
                // Example: Filter a DataGridView
                FilterData(e.Value, hRange.UpperValue);
};

// 2. Upper Value Changed
hRange.UpperValueChanged += (sender, e) =>
{
                Console.WriteLine($"End Value: {e.Value}");
    
                // Example: Update price label
    lblMaxPrice.Text = "$" + e.Value;
};

Interaction Features

Advanced usability features built directly into the control:

Keyboard Navigation: Press Tab to switch focus between the Left and Right thumbs. Use Left/Right Arrow Keys to move the focused thumb.
Mouse Wheel: Hover and scroll to adjust the active thumb. Hold Ctrl to adjust the other thumb without switching focus.
Context Menu: Right-clicking a thumb reveals a menu to precise-set the value, increment, or decrement.
Tooltips: Hovering over a thumb displays its exact value in a tooltip.

Detailed Usage Examples

Example 1: E-Commerce Price Filter

A classic horizontal price range selector ($0 - $500) with green styling and snapping behavior.

C# - Price Range Selector

private SiticoneHRangeTrackBar CreatePriceSelector()
{
                var priceSlider = new SiticoneHRangeTrackBar
    {
        Size = new Size(400, 50),
        Minimum = 0,
        Maximum = 500,
        LowerValue = 50,
        UpperValue = 200,
        
                // Precision
        Step = 10,
        SnapToTick = true,
        TickFrequency = 50,
        
                // Visuals
        ThumbColor = Color.SeaGreen,
        SelectedRangeColor = Color.MediumSeaGreen,
        TrackColor = Color.WhiteSmoke,
        ShowValueLabels = true,
        ValueLabelFont = new Font("Segoe UI", 9f, FontStyle.Bold)
    };

                // Handle updates
    priceSlider.UpperValueChanged += (s, e) => 
    {
        lblFilterStatus.Text = $"Showing items between ${priceSlider.LowerValue} and ${e.Value}";
    };

                return priceSlider;
}

Example 2: Video Timeline Trimmer

A range slider representing a video timeline (Start Time / End Time) with custom context menu interaction.

C# - Video Trimmer

private void SetupVideoTrimmer(SiticoneHRangeTrackBar trimmer, int videoLengthSeconds)
{
    trimmer.Minimum = 0;
    trimmer.Maximum = videoLengthSeconds;
    trimmer.LowerValue = 0;
    trimmer.UpperValue = videoLengthSeconds;
    
                // Style as a timeline
    trimmer.TrackHeight = 8;
    trimmer.ThumbRadius = 8;
    trimmer.ThumbColor = Color.RoyalBlue;
    trimmer.SelectedRangeColor = Color.CornflowerBlue;
    
                // Hide numeric labels, we might use a separate timecode display
    trimmer.ShowValueLabels = false; 
    
    trimmer.LowerValueChanged += (s, e) =>
    {
                VideoPlayer.SetStartPoint(e.Value);
    };
    
    trimmer.UpperValueChanged += (s, e) =>
    {
                VideoPlayer.SetEndPoint(e.Value);
    };
}

Example 3: Dynamic Theme Application

Programmatically switching the control's theme at runtime.

C# - Theme Switcher

public void ApplyDarkTheme(SiticoneHRangeTrackBar slider)
{
    slider.BackColor = Color.FromArgb(45, 45, 48);
    slider.TrackColor = Color.FromArgb(80, 80, 80);
    slider.ThumbColor = Color.DodgerBlue;
    slider.ThumbHoverColor = Color.DeepSkyBlue;
    slider.SelectedRangeColor = Color.RoyalBlue;
    
    slider.ValueLabelColor = Color.White;
    slider.TickColor = Color.Gray;
    
    slider.Invalidate();
}