Appearance and rendering

The visual style of TTMSFNCRangeSlider is driven by its Appearance property, a settings object shared with the TMS FNC track-bar family. It controls the orientation of the track, the colour of each track zone, the shape and size of the two thumbs, and the tick marks and labels printed along the track. When the built-in styling is not enough — for example to brand the thumbs or draw a value bubble — the slider also raises before/after draw events that let you take over rendering completely. This guide covers each appearance area in turn and then shows how to combine them. For the value model and events, see Values, events, and interaction.

Orientation

Appearance.Orientation lays the track out horizontally (tboHorizontal, the default) or vertically (tboVertical). A vertical slider is convenient for height, volume, or temperature ranges where an up/down metaphor reads more naturally than left/right. Orientation only changes layout and hit-testing; the value model, thumb ordering, and events are identical in both directions.

TMSFNCRangeSlider1.Appearance.Orientation := tboVertical;

Colouring the three track zones

The two thumbs divide the track into three segments, each with its own fill and stroke so you can make the selected range stand out:

Zone	Fill	Stroke	Covers
Left	Appearance.LineFill	Appearance.LineStroke	From Min up to the left thumb.
Middle	Appearance.LineMiddleFill	Appearance.LineMiddleStroke	Between the two thumbs — the selected range.
Right	Appearance.LineRightFill	Appearance.LineRightStroke	From the right thumb up to Max.

Each fill is a TTMSFNCGraphicsFill, so set both its Kind (for example gfkSolid) and Color. Highlighting the middle zone is the most common choice because it visually answers "what did I select?".

{ Emphasise the selected range and mute the outer zones: }
TMSFNCRangeSlider1.Appearance.LineMiddleFill.Kind  := gfkSolid;
TMSFNCRangeSlider1.Appearance.LineMiddleFill.Color := $FF00AAFF;
TMSFNCRangeSlider1.Appearance.LineFill.Color       := gcGainsboro;
TMSFNCRangeSlider1.Appearance.LineRightFill.Color  := gcGainsboro;

Note

LineMiddleFill, LineMiddleStroke, LineRightFill, and LineRightStroke were added in version 1.0.2.0. Earlier builds expose only a single track fill.

Thumbs

Each thumb is styled independently so the lower and upper handles can differ. ThumbFill, ThumbStroke, ThumbShape, ThumbWidth, and ThumbHeight style the left thumb; the matching ThumbRightFill, ThumbRightStroke, ThumbRightWidth, and ThumbRightHeight style the right one. The *Down* variants (ThumbDownFill, ThumbRightDownFill, …) apply while a thumb is pressed, and ThumbBitmap/ThumbRightBitmap replace the drawn thumb with an image.

TMSFNCRangeSlider1.Appearance.ThumbWidth      := 18;
TMSFNCRangeSlider1.Appearance.ThumbRightWidth := 18;
TMSFNCRangeSlider1.Appearance.ThumbFill.Color      := gcDodgerblue;
TMSFNCRangeSlider1.Appearance.ThumbRightFill.Color := gcTomato;

Tick marks and value labels

Tick marks orient the user along the track. TickMarkPosition chooses which side(s) of the track they appear on, TickMarkDivision sets the value interval between ticks, and TickMarkSize/TickMarkStroke control their look. Set TickMarkLabel := True to print the value beside each tick, formatted with TickMarkLabelFormat (a standard Format string such as '%.0f') and rendered in TickMarkLabelFont.

TMSFNCRangeSlider1.Appearance.TickMarkDivision   := 10;
TMSFNCRangeSlider1.Appearance.TickMarkLabel      := True;
TMSFNCRangeSlider1.Appearance.TickMarkLabelFormat := '%.0f';

Separately, TrackLabelPosition, TrackLabelFormat, and TrackLabelFont print the current value of each thumb that follows the thumb as it moves, which is useful when exact readouts matter more than fixed reference ticks.

Custom thumb rendering

When the appearance properties are not enough, handle OnBeforeDrawThumb to draw the thumb yourself. Set ADefaultDraw := False to replace the built-in thumb while keeping the event active, or AAllow := False to skip the thumb entirely. The ALeft parameter lets you give the two thumbs different custom looks; OnAfterDrawThumb runs after the default drawing if you only want to overlay a decoration.

{ Assign in the Object Inspector or in code: }
procedure TForm1.FormCreate(Sender: TObject);
begin
  TMSFNCRangeSlider1.OnBeforeDrawThumb := RangeSliderBeforeDrawThumb;
end;

// ALeft tells you which thumb is being drawn; set ADefaultDraw := False to replace
// the built-in thumb, or AAllow := False to skip drawing the thumb entirely.
procedure TForm1.RangeSliderBeforeDrawThumb(Sender: TObject;
  AGraphics: TTMSFNCGraphics; ARect: TRectF; AValue: Single; ALeft: Boolean;
  var AAllow: Boolean; var ADefaultDraw: Boolean);
begin
  ADefaultDraw := False;

  if ALeft then
    AGraphics.Fill.Color := gcDodgerblue
  else
    AGraphics.Fill.Color := gcTomato;

  AGraphics.Fill.Kind   := gfkSolid;
  AGraphics.Stroke.Kind := gskSolid;
  AGraphics.DrawEllipse(ARect);
end;

Combining orientation, zones, and labelled ticks

A polished range selector usually combines several appearance settings at once: a vertical track, a highlighted middle zone, and labelled tick marks so the user can read the bounds at a glance. The snippet below sets all three together on a 0–100 slider.

// Vertical orientation with tick marks and coloured fill zones
TMSFNCRangeSlider1.Min := 0;
TMSFNCRangeSlider1.Max := 100;
TMSFNCRangeSlider1.ValueLeft  := 20;
TMSFNCRangeSlider1.ValueRight := 80;

TMSFNCRangeSlider1.Appearance.Orientation := tboVertical;

// Colour the range between the thumbs differently from the outer zones
TMSFNCRangeSlider1.Appearance.LineMiddleFill.Color := $FF00AAFF;  // blue between thumbs
TMSFNCRangeSlider1.Appearance.LineMiddleFill.Kind  := gfkSolid;

// Show tick marks with labels every 10 units
TMSFNCRangeSlider1.Appearance.TickMarkLabel    := True;
TMSFNCRangeSlider1.Appearance.TickMarkDivision := 10;
TMSFNCRangeSlider1.Appearance.TickMarkLabelFormat := '%.0f';

High-DPI Displays

Everything the slider draws is sized in design pixels measured at 96 DPI, and the control rescales that set when the host form moves to a monitor with a different DPI: ThumbWidth, ThumbHeight, ThumbRightWidth, ThumbRightHeight, TickMarkSize, TickMarkSpacing, TickMarkLabelFont and TrackLabelFont. Set them to their unscaled design values; scaling them yourself produces thumbs that grow twice as fast as the track they slide on.

LineWidth is the deliberate exception. A value of 1 is treated as a hairline and left alone, so a one-pixel track stays crisply one physical pixel at every DPI instead of blurring into a scaled 1.5. Give LineWidth 2 or more when you actually want the track to grow with the display.

{ Call this from your form's OnCreate: }
procedure TForm1.ConfigureRangeSliderMetrics;
begin
  TMSFNCRangeSlider1.BeginUpdate;
  try
    // Every metric below is a design pixel measured at 96 DPI. On a high-DPI
    // monitor the slider rescales the thumb sizes, tick size and spacing, and
    // both label fonts, so author them unscaled.
    TMSFNCRangeSlider1.Appearance.ThumbWidth := 10;
    TMSFNCRangeSlider1.Appearance.ThumbHeight := 20;
    TMSFNCRangeSlider1.Appearance.ThumbRightWidth := 10;
    TMSFNCRangeSlider1.Appearance.ThumbRightHeight := 20;
    TMSFNCRangeSlider1.Appearance.TickMarkSize := 5;
    TMSFNCRangeSlider1.Appearance.TickMarkSpacing := 8;
    TMSFNCRangeSlider1.Appearance.TickMarkLabelFont.Size := 9;
    TMSFNCRangeSlider1.Appearance.TrackLabelFont.Size := 10;

    // LineWidth is the one exception: a value of 1 is treated as a hairline
    // and is left alone, so the track stays one physical pixel at every DPI.
    // Give it 2 or more when you want the track to grow with the display.
    TMSFNCRangeSlider1.Appearance.LineWidth := 3;
  finally
    TMSFNCRangeSlider1.EndUpdate;
  end;
end;

Common pitfalls

• Colouring only the middle zone. If you set LineMiddleFill but leave the outer zones at their theme default, the contrast may be weak. Set LineFill/LineRightFill to a muted colour so the selection reads clearly.
• Tick labels with no division. Setting TickMarkLabel := True without a sensible TickMarkDivision produces cluttered or missing labels. Pick a division that yields a readable number of ticks across the range.
• Forgetting ADefaultDraw := False. In OnBeforeDrawThumb, your custom drawing is layered on top of the default thumb unless you suppress it; set ADefaultDraw := False to fully replace it.

See also

• Values, events, and interaction — value model, the three change events, and data binding.
• Get started
• TTMSFNCRangeSlider API reference
• Range Slider release notes