Table of Contents

Track Bar Guide

TTMSFNCTrackBar is a single-thumb slider for selecting a value within a Min/Max range. It supports horizontal and vertical orientations, tick marks with labels, a coloured right-zone fill, and two events for live and committed value changes.

TTMSFNCTrackBar default

Basic setup

Set Min, Max, and Value, then wire OnValueChanged to act on the committed result.

// Simple volume slider from 0 to 100
TMSFNCTrackBar1.Min := 0;
TMSFNCTrackBar1.Max := 100;
TMSFNCTrackBar1.Value := 50;

procedure TForm1.TMSFNCTrackBar1ValueChanged(Sender: TObject; AValue: Single);
begin
  LabelVolume.Caption := 'Volume: ' + Format('%.0f', [AValue]) + '%';
end;

Appearance and interaction options

Appearance.Orientation switches between horizontal and vertical. Tick mark properties control the display of graduation marks and their labels. Appearance.LineRightFill colours the track section to the right (or above) the thumb. Setting Interaction.JumpToExactValue := True moves the thumb directly to the clicked position rather than stepping toward it.

TTMSFNCTrackBar with custom appearance 
// Vertical slider with tick marks, coloured right-zone fill, and repeat-click
TMSFNCTrackBar1.Min := -20;
TMSFNCTrackBar1.Max :=  20;
TMSFNCTrackBar1.Value := 0;

TMSFNCTrackBar1.Appearance.Orientation := tboVertical;

// Tick marks every 5 units with labels
TMSFNCTrackBar1.Appearance.TickMarkLabel    := True;
TMSFNCTrackBar1.Appearance.TickMarkDivision := 5;
TMSFNCTrackBar1.Appearance.TickMarkLabelFormat := '%.0f';
TMSFNCTrackBar1.Appearance.TickMarkPosition := tmpBoth;

// Fill the track to the right of the thumb in a highlight colour
TMSFNCTrackBar1.Appearance.LineRightFill.Kind  := gfkSolid;
TMSFNCTrackBar1.Appearance.LineRightFill.Color := $FF80C0FF;

// Jump to the position the user clicks rather than stepping toward it
TMSFNCTrackBar1.Interaction.JumpToExactValue := True;

Combining the trackbar with a value edit

Two events serve different update needs: OnValueChange fires continuously during dragging (useful for live preview), while OnValueChanged fires once on release. Wiring both the trackbar and an edit control to update each other creates a linked input pair.

// Combine trackbar with a label edit that lets users type the value directly.
// OnValueChange fires during drag; OnValueChanged fires on release.

TMSFNCTrackBar1.Min := 0;
TMSFNCTrackBar1.Max := 255;
TMSFNCTrackBar1.Value := 128;
TMSFNCTrackBar1.Interaction.Frequency := 1;
TMSFNCTrackBar1.Interaction.JumpToExactValue := True;

procedure TForm1.TMSFNCTrackBar1ValueChange(Sender: TObject; AValue: Single);
begin
  // Live update: fires as the thumb moves
  EditValue.Text := IntToStr(Round(AValue));
  ShapePreview.Fill.Color := RGB(Round(AValue), 0, 0);
end;

procedure TForm1.EditValueChange(Sender: TObject);
var
  v: Integer;
begin
  // Allow the user to type a value into the edit to move the thumb
  if TryStrToInt(EditValue.Text, v) then
    TMSFNCTrackBar1.Value := v;
end;