Slider & ProgressBar

Overview

The Slider and ProgressBar controls provide Material Design 3.0 range input and progress feedback, rendered entirely with SkiaSharp. Slider lets users select a value from a range by dragging a thumb along a track, with optional tick marks and a value label. ProgressBar displays a determinate fill percentage or an indeterminate animated stripe to indicate ongoing activity.

Both controls use the active Material theme for track, thumb, and fill colors. The slider thumb scales up on press (with a ripple effect) and the progress bar supports a smooth fill animation when the value changes programmatically.

Slider Properties

ProgressBar Properties

Circular ProgressBar

When Style = ProgressBarStyle.Circular, the control renders as a circular arc. Additional properties apply:

Events

Code Example

var opacitySlider = new Slider
{
    Min = 0,
    Max = 100,
    Value = 75,
    ShowValueLabel = true,
    ValueFormat = "0%",
    X = 40, Y = 40,
    Width = 300, Height = 56
};

opacitySlider.Initialize();
opacitySlider.ValueChanged += (s, val) =>
    Console.WriteLine($"Opacity: {val}%");

drawingManager.AddComponent(opacitySlider);
drawingManager.RequestRedraw();

var fontSizeSlider = new Slider
{
    Min = 8,
    Max = 48,
    Value = 16,
    Step = 4,
    ShowTickMarks = true,
    ShowValueLabel = true,
    ValueFormat = "0px",
    X = 40, Y = 120,
    Width = 300, Height = 56
};

fontSizeSlider.Initialize();
fontSizeSlider.ValueChanged += (s, val) =>
{
    int fontSize = (int)val;
    textLabel.FontSize = fontSize;
    textLabel.Invalidate();
};

drawingManager.AddComponent(fontSizeSlider);

var volumeSlider = new Slider
{
    Min = 0,
    Max = 100,
    Value = 65,
    Orientation = SKOrientation.Vertical,
    ShowValueLabel = true,
    X = 380, Y = 40,
    Width = 56, Height = 200
};

volumeSlider.Initialize();
volumeSlider.ValueChanged += (s, val) =>
    Console.WriteLine($"Volume: {val}");

drawingManager.AddComponent(volumeSlider);

var determinateBar = new ProgressBar
{
    Value = 65,
    Max = 100,
    Style = ProgressBarStyle.Linear,
    AnimationDuration = 500,
    X = 40, Y = 260,
    Width = 350, Height = 8
};

determinateBar.Initialize();

var indeterminateBar = new ProgressBar
{
    IsIndeterminate = true,
    Style = ProgressBarStyle.Linear,
    X = 40, Y = 290,
    Width = 350, Height = 8
};

indeterminateBar.Initialize();

drawingManager.AddComponent(determinateBar);
drawingManager.AddComponent(indeterminateBar);

var circularProgress = new ProgressBar
{
    Value = 72,
    Max = 100,
    Style = ProgressBarStyle.Circular,
    TrackThickness = 6,
    X = 460, Y = 40,
    Width = 80, Height = 80
};

circularProgress.Initialize();

var circularIndeterminate = new ProgressBar
{
    IsIndeterminate = true,
    Style = ProgressBarStyle.Circular,
    TrackThickness = 6,
    X = 460, Y = 140,
    Width = 80, Height = 80
};

circularIndeterminate.Initialize();

drawingManager.AddComponent(circularProgress);
drawingManager.AddComponent(circularIndeterminate);

var priceRange = new Slider
{
    Min = 0,
    Max = 1000,
    Value = 200,
    IsRange = true,
    RangeStart = 800,
    ValueFormat = "$0",
    ShowTickMarks = true,
    Step = 50,
    X = 40, Y = 340,
    Width = 380, Height = 56
};

priceRange.Initialize();
priceRange.ValueChanged += (s, val) =>
    Console.WriteLine($"Range: ${priceRange.RangeStart} - ${val}");

drawingManager.AddComponent(priceRange);
drawingManager.RequestRedraw();