Siticone HRangeSlider

The SiticoneHRangeSlider is a horizontal range selection control featuring dual thumbs for selecting a range between a minimum and maximum value. It supports smooth animations, custom thumb shapes, tooltips, ticks, and extensive styling options.

Range & Values

Configure the numeric range and initial positions of the sliders.

Property	Type	Description & Usage Example
`Minimum`	int	slider.Minimum = 0; The lowest possible value in the range.
`Maximum`	int	slider.Maximum = 100; The highest possible value in the range.
`LowerValue`	int	slider.LowerValue = 25; The current value of the left (lower) thumb.
`UpperValue`	int	slider.UpperValue = 75; The current value of the right (upper) thumb.
`Step`	int	slider.Step = 5; The increment/decrement value when using arrow keys or scroll wheel.
`ValuesDifference`	int	int diff = slider.ValuesDifference; Read-only. Returns the difference between UpperValue and LowerValue.

Appearance & Styling

Customize the look of the track, thumbs, ticks, and labels.

Property	Type	Description & Usage Example
`ThumbStyles`	ThumbStyle	slider.ThumbStyles = ThumbStyle.Circle; Shape of the thumbs: `Circle`, `Square`, or `Diamond`.
`ThumbFillColor`	Color	slider.ThumbFillColor = Color.White; Background color of the thumbs.
`ThumbBorderColor`	Color	slider.ThumbBorderColor = Color.Blue; Border color of the thumbs.
`ThumbRadius`	int	slider.ThumbRadius = 10; Size of the thumb handle.
`TrackColor`	Color	slider.TrackColor = Color.LightGray; Color of the unselected track background.
`SelectedRangeColor`	Color	slider.SelectedRangeColor = Color.DodgerBlue; Color of the active range between the two thumbs.
`TrackHeight`	int	slider.TrackHeight = 4; Thickness of the track line.
`ShowValueLabels`	bool	slider.ShowValueLabels = true; Displays the current values above each thumb.
`ShowTickMarks`	bool	slider.ShowTickMarks = true; Shows tick marks along the track.
`TickFrequency`	int	slider.TickFrequency = 10; Interval between tick marks.

Animation & Tooltips

Configure visual feedback effects for hover and drag interactions.

Property	Type	Description & Usage Example
`ShowThumbTooltips`	bool	slider.ShowThumbTooltips = true; Shows a floating tooltip with the value when hovering over a thumb.
`ThumbHoverAnimation`	ThumbAnimation	slider.ThumbHoverAnimation = ThumbAnimation.Scale; Effect on hover: `None`, `Scale`, `Fill`, or `ScaleAndFill`.
`ThumbDragAnimation`	ThumbAnimation	slider.ThumbDragAnimation = ThumbAnimation.Fill; Effect while dragging.
`ThumbScale`	float	slider.ThumbScale = 1.25f; Scaling factor for animations (e.g., 1.25 = 125%).
`ThumbAnimatedFillColor`	Color	slider.ThumbAnimatedFillColor = Color.Blue; Target color for the 'Fill' animation effect.
`UltraFastMode`	bool	slider.UltraFastMode = true; Disables animations for high-performance scenarios.

Designer & Smart Tags

The control includes a rich Smart Tag panel for rapid configuration.

Feature	Description
`Theme Presets`	Instantly apply color schemes like "Default", "Blue", "Green", "Orange", or "Red" via the designer menu.
`Quick Actions`	Shortcuts to set common ranges (0-100, Bipolar -100 to 100), reset defaults, and toggle read-only mode.
`Animation Tests`	Run test animations (Animate to Min/Max, Quarters, etc.) directly in the designer to preview behavior.

Detailed Usage Examples

Example 1: Price Range Filter

A classic e-commerce price filter slider ($0 to $1000).

C# - Price Filter

private void SetupPriceSlider()
{
    var slider = new SiticoneHRangeSlider();
    slider.Minimum = 0;
    slider.Maximum = 1000;
    slider.LowerValue = 200;
    slider.UpperValue = 800;
    slider.Step = 10;
    
                // Styling
    slider.SelectedRangeColor = Color.SeaGreen;
    slider.ThumbStyles = ThumbStyle.Circle;
    slider.ShowValueLabels = true;
    slider.ShowThumbTooltips = true;
    
                // Event Handling
    slider.LowerValueChanged += (s, e) => 
    {
        lblMinPrice.Text = $"${e.Value}";
                FilterProducts(e.Value, slider.UpperValue);
    };
    
    slider.UpperValueChanged += (s, e) => 
    {
        lblMaxPrice.Text = $"${e.Value}";
                FilterProducts(slider.LowerValue, e.Value);
    };
    
    this.Controls.Add(slider);
}

Example 2: Date Range Picker

Using the slider to select a range of years.

C# - Year Selector

private void InitializeYearSlider()
{
    var yearSlider = new SiticoneHRangeSlider();
    yearSlider.Minimum = 2000;
    yearSlider.Maximum = 2030;
    yearSlider.LowerValue = 2010;
    yearSlider.UpperValue = 2020;
    yearSlider.Step = 1;
    
                // Ticks every 5 years
    yearSlider.ShowTickMarks = true;
    yearSlider.TickFrequency = 5;
    
                // Visuals
    yearSlider.TrackColor = Color.LightSlateGray;
    yearSlider.SelectedRangeColor = Color.DarkSlateBlue;
    yearSlider.ThumbFillColor = Color.White;
    yearSlider.ThumbBorderColor = Color.DarkSlateBlue;
    
    this.Controls.Add(yearSlider);
}

Example 3: Snap-to-Tick Slider

A slider where values snap to specific increments (e.g., rating 1-5).

C# - Snap Behavior

private void SetupRatingRange()
{
    var ratingSlider = new SiticoneHRangeSlider();
    ratingSlider.Minimum = 1;
    ratingSlider.Maximum = 5;
    ratingSlider.SnapToTick = true; // Enforce snapping
    ratingSlider.TickFrequency = 1;
    
    ratingSlider.LowerValue = 2;
    ratingSlider.UpperValue = 4;
    
    ratingSlider.ThumbStyles = ThumbStyle.Square;
    ratingSlider.SelectedRangeColor = Color.Gold;
    
    this.Controls.Add(ratingSlider);
}