Siticone Vertical Range TrackBar

The SiticoneVRangeTrackBar is a specialized vertical slider featuring two distinct thumbs (Lower and Upper). It is designed for selecting numeric ranges—such as price filters, temperature brackets, or time intervals—within a modern, touch-friendly UI. This control supports fluid animations, built-in value labels, tick marks, and keyboard accessibility.

Values & Range

Configure the boundaries of the slider and access the selected range. The control automatically ensures that LowerValue never exceeds UpperValue.

Property	Type	Description & Usage Example
`LowerValue`	int	rangeSlider.LowerValue = 20; The value of the bottom thumb (start of the range).
`UpperValue`	int	rangeSlider.UpperValue = 80; The value of the top thumb (end of the range).
`Minimum`	int	rangeSlider.Minimum = 0; The lowest possible value on the scale.
`Maximum`	int	rangeSlider.Maximum = 100; The highest possible value on the scale.
`Step`	int	rangeSlider.Step = 5; The value increment for keyboard (Arrow keys) and mouse wheel actions.
`ValuesDifference`	float	float diff = rangeSlider.ValuesDifference; A read-only property returning `UpperValue - LowerValue`.

Appearance & Styling

Customize the look of the thumbs, track, and the selected range highlight.

Property	Type	Description & Usage Example
`ThumbColor`	Color	rangeSlider.ThumbColor = Color.SeaGreen; The color of both thumbs in their normal state.
`ThumbHoverColor`	Color	rangeSlider.ThumbHoverColor = Color.LimeGreen; The color of a thumb when the mouse hovers over it.
`SelectedRangeColor`	Color	rangeSlider.SelectedRangeColor = Color.MediumSeaGreen; The color of the track section between the two thumbs.
`TrackColor`	Color	rangeSlider.TrackColor = Color.LightGray; The color of the unselected background track.
`ThumbRadius`	int	rangeSlider.ThumbRadius = 10; The size (radius) of the circular thumbs.
`TrackWidth`	int	rangeSlider.TrackWidth = 4; The thickness of the vertical line.

Labels & Tick Marks

Built-in visualization tools to help users interpret the values accurately.

Property	Type	Description & Usage Example
`ShowValueLabels`	bool	rangeSlider.ShowValueLabels = true; Draws text values directly next to the thumbs.
`ValueLabelPosition`	ValueLabelPosition	rangeSlider.ValueLabelPosition = ValueLabelPosition.Right; Determines where labels appear: `Left`, `Right`, `Top`, or `Bottom`.
`ShowTickMarks`	bool	rangeSlider.ShowTickMarks = true; Renders ruler-like ticks along the track.
`TickFrequency`	int	rangeSlider.TickFrequency = 10; Draws a tick mark at every Nth value.
`SnapToTick`	bool	rangeSlider.SnapToTick = true; If true, thumbs will automatically snap to the nearest tick mark when released.

Behavior & Performance

Property	Type	Description & Usage Example
`UltraFastMode`	bool	rangeSlider.UltraFastMode = true; Disables high-quality anti-aliasing, animations, and non-essential graphics (labels/ticks) to maximize rendering speed.
`Padding`	Padding	rangeSlider.Padding = new Padding(10); Defines the internal safe area to ensure thumbs don't clip at the edges.

Events

The control provides distinct events for each thumb, allowing precise logic triggers when values change. Both events provide a custom argument containing the new value and the current difference between thumbs.

Event Handling

// 1. Lower Value Changed
rangeSlider.LowerValueChanged += (sender, e) =>
{
                Console.WriteLine($"Lower value is now: {e.Value}");
                Console.WriteLine($"Range size is: {e.ValuesDifference}");
    
                // Example: Update a label
    lblMinPrice.Text = "$" + e.Value;
};

// 2. Upper Value Changed
rangeSlider.UpperValueChanged += (sender, e) =>
{
                Console.WriteLine($"Upper value is now: {e.Value}");
    
                // Example: Filter a data list
                FilterProducts(rangeSlider.LowerValue, (int)e.Value);
};

Advanced Interaction

The control supports several advanced interaction patterns out of the box:

Keyboard Navigation: Use the Tab key to toggle focus between the Lower and Upper thumbs. Use Arrow Keys to adjust the focused thumb.
Mouse Wheel: Hovering and scrolling adjusts the currently focused thumb. Holding Ctrl while scrolling inverts the selection (scrolls the other thumb).
Context Menu: Right-clicking a thumb opens a built-in context menu allowing users to precise-type values or increment/decrement by steps.

Detailed Usage Examples

Example 1: Price Range Filter

A classic use case for e-commerce applications. Sets up a range from $0 to $1000 with visible labels.

C# - Price Filter

private SiticoneVRangeTrackBar CreatePriceFilter()
{
                var priceSlider = new SiticoneVRangeTrackBar
    {
        Size = new Size(80, 400), // Tall vertical slider
        Minimum = 0,
        Maximum = 1000,
        LowerValue = 100,
        UpperValue = 500,
        Step = 10,
        
                // Visuals: Green Money Theme
        ThumbColor = Color.ForestGreen,
        SelectedRangeColor = Color.DarkSeaGreen,
        TrackColor = Color.WhiteSmoke,
        
                // Labels
        ShowValueLabels = true,
        ValueLabelPosition = ValueLabelPosition.Right,
        ValueLabelColor = Color.DarkGreen,
        ValueLabelFont = new Font("Segoe UI", 10f, FontStyle.Bold),
        
                // Ticks
        ShowTickMarks = true,
        TickFrequency = 100
    };

                // Update UI when range changes
    priceSlider.UpperValueChanged += (s, e) => 
    {
        lblPriceRange.Text = $"${priceSlider.LowerValue} - ${e.Value}";
    };

                return priceSlider;
}

Example 2: Temperature Control (Negative Values)

Demonstrates handling negative ranges and snapping to ticks for precise degree selection.

C# - Temperature Control

private void SetupTemperatureControl(SiticoneVRangeTrackBar slider)
{
    slider.Minimum = -20;
    slider.Maximum = 40;
    slider.LowerValue = 18;
    slider.UpperValue = 24;
    
                // Snap to integer degrees
    slider.SnapToTick = true;
    slider.TickFrequency = 1; // Tick every degree
    slider.Step = 1;
    
                // Styling
    slider.ThumbRadius = 8;
    slider.TrackWidth = 6;
    slider.ThumbColor = Color.OrangeRed;
    slider.SelectedRangeColor = Color.Orange;
    
                // Customize right-click menu font
    slider.ContextMenuFont = new Font("Consolas", 9f);
}

Example 3: Dynamic Theming

Programmatically changing colors based on application state or user preference.

C# - Theme Application

public void ApplyDarkTheme(SiticoneVRangeTrackBar slider)
{
    slider.BackColor = Color.FromArgb(30, 30, 30);
    slider.TrackColor = Color.FromArgb(60, 60, 60);
    slider.SelectedRangeColor = Color.SeaGreen;
    slider.ThumbColor = Color.MediumSeaGreen;
    slider.ThumbHoverColor = Color.LightGreen;
    
    slider.ValueLabelColor = Color.WhiteSmoke;
    slider.TickColor = Color.Gray;
    
    slider.Invalidate(); // Force redraw
}