Skip to content

feat(sr): Material and Cupertino Slider recorder added #1035

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JuanNaranjoDD merged 12 commits into from
May 19, 2026
Merged

feat(sr): Material and Cupertino Slider recorder added #1035

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4312745
chore(sr): slider_recorder.dart added
JuanNaranjoDD May 11, 2026
36ffb04
Merge branch 'develop' into juan.naranjo/widget_support
JuanNaranjoDD May 11, 2026
329d389
Material slider recorder version 1
JuanNaranjoDD May 15, 2026
b490d8d
Material Slider without divisions property
JuanNaranjoDD May 18, 2026
b56d83d
Divisions rendering feature added
JuanNaranjoDD May 18, 2026
4cac9e0
feat(sr): Material Slider Recorder added
JuanNaranjoDD May 18, 2026
20aef8e
feat(sr): Cupertino slider recorder added
JuanNaranjoDD May 18, 2026
f4f070f
feat(sr): Material slider recorder and Cupertino Slider recorder added
JuanNaranjoDD May 18, 2026
0f41822
feat(sr): Material and Cupertino Slider recorder added with tests
JuanNaranjoDD May 18, 2026
663d542
Merge branch 'develop' into juan.naranjo/widget_support
JuanNaranjoDD May 18, 2026
d6efe9f
chore(sr): dart format applied and feedback comments addressed
JuanNaranjoDD May 19, 2026
51826ec
Merge branch 'develop' into juan.naranjo/widget_support
JuanNaranjoDD May 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added ...datadog_session_replay/example/golden_test/goldens/masked_cupertino_sliders.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .../datadog_session_replay/example/golden_test/goldens/masked_material_sliders.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...tadog_session_replay/example/golden_test/goldens/unmasked_cupertino_sliders.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...atadog_session_replay/example/golden_test/goldens/unmasked_material_sliders.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
192 changes: 192 additions & 0 deletions packages/datadog_session_replay/example/golden_test/simple_widget_golden_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,4 +471,196 @@ void main() {
);
await snapshotTest(tester, recorder, fixture);
});

testWidgets('unmasked material sliders', (tester) async {
final fixture = MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Unmasked Material Sliders')),
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// year2023 = true (default M3 round thumb) — min, mid, max.
Slider(value: 0.0, onChanged: (_) {}),
Slider(value: 0.5, onChanged: (_) {}),
Slider(value: 1.0, onChanged: (_) {}),
// Custom colors.
Slider(
value: 0.5,
onChanged: (_) {},
activeColor: Colors.green,
inactiveColor: Colors.yellow,
thumbColor: Colors.red,
),
// With secondary track value.
Slider(
value: 0.3,
secondaryTrackValue: 0.7,
onChanged: (_) {},
),
// Discrete slider with tick marks.
Slider(value: 0.4, divisions: 5, onChanged: (_) {}),
// M3-2024 (year2023 = false) — handle thumb + gap + stop indicator.
Slider(
// ignore: deprecated_member_use
year2023: false,
value: 0.4,
onChanged: (_) {},
),
Slider(
// ignore: deprecated_member_use
year2023: false,
value: 0.4,
divisions: 5,
onChanged: (_) {},
),
// Disabled.
Slider(value: 0.5, onChanged: null),
],
),
),
),
),
);
await snapshotTest(tester, recorder, fixture);
});

testWidgets('unmasked cupertino sliders', (tester) async {
final fixture = MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Unmasked Cupertino Sliders')),
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CupertinoSlider(value: 0.0, onChanged: (_) {}),
CupertinoSlider(value: 0.5, onChanged: (_) {}),
CupertinoSlider(value: 1.0, onChanged: (_) {}),
CupertinoSlider(
value: 0.5,
onChanged: (_) {},
activeColor: CupertinoColors.systemPurple,
thumbColor: CupertinoColors.systemPurple,
),
CupertinoSlider(value: 0.5, onChanged: null),
CupertinoSlider(value: 0.5, divisions: 5, onChanged: (_) {}),
],
),
),
),
),
);
await snapshotTest(tester, recorder, fixture);
});

testWidgets('masked material sliders', (tester) async {
recorder = SessionReplayRecorder(
defaultCapturePrivacy: TreeCapturePrivacy(
textAndInputPrivacyLevel: TextAndInputPrivacyLevel.maskAllInputs,
imagePrivacyLevel: ImagePrivacyLevel.maskNone,
),
touchPrivacyLevel: TouchPrivacyLevel.show,
);
recorder.updateContext(context);

// With maskAllInputs every thumb should be anchored at the track midpoint
// regardless of the supplied value (0.0, 0.5, 1.0 should all look the same).
final fixture = MaterialApp(
Comment on lines +570 to +572
Copy link
Copy Markdown
Member

@fuzzybinary fuzzybinary May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm sure you verified this, but I just want to be sure this is what iOS / Android do for masked sliders. They don't do anything else special to indicate they've been masked?

Copy link
Copy Markdown
Contributor Author

@JuanNaranjoDD JuanNaranjoDD May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That’s actually my suggestion. In a native app, there’s no reason to mask a slider. Masking is a Session Replay feature, which means we’re intentionally not representing what is actually shown on the screen.

Copy link
Copy Markdown
Member

@fuzzybinary fuzzybinary May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like iOS and Android show the track, but not the thumb. I'm okay having the thumb just be at the middle, but we should verify we're okay with that being different from the other platforms.

Copy link
Copy Markdown
Contributor Author

@JuanNaranjoDD JuanNaranjoDD May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I noticed is that when the onChanged property is set to null, the thumb is still displayed, the only difference is the color used to represent the widget (which I already handled). Or do you mean that the other SDKs only display the track in that state?

Copy link
Copy Markdown
Member

@fuzzybinary fuzzybinary May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is specifically when a user asks to mask inputs by specifying .maskAllInputs either at the root or with a masking override. It looks like in that case iOS and Android only display the track and not the thumb, but confirm with @gonzalezreal.

home: Scaffold(
appBar: AppBar(title: const Text('Masked Material Sliders')),
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// year2023 = true (default M3 round thumb) — min, mid, max.
Slider(value: 0.0, onChanged: (_) {}),
Slider(value: 0.5, onChanged: (_) {}),
Slider(value: 1.0, onChanged: (_) {}),
// Custom colors.
Slider(
value: 0.5,
onChanged: (_) {},
activeColor: Colors.green,
inactiveColor: Colors.yellow,
thumbColor: Colors.red,
),
// With secondary track value.
Slider(
value: 0.3,
secondaryTrackValue: 0.7,
onChanged: (_) {},
),
// Discrete slider with tick marks.
Slider(value: 0.4, divisions: 5, onChanged: (_) {}),
// M3-2024 (year2023 = false) — handle thumb + gap + stop indicator.
Slider(
// ignore: deprecated_member_use
year2023: false,
value: 0.4,
onChanged: (_) {},
),
Slider(
// ignore: deprecated_member_use
year2023: false,
value: 0.4,
divisions: 5,
onChanged: (_) {},
),
// Disabled.
Slider(value: 0.5, onChanged: null),
],
),
),
),
),
);
await snapshotTest(tester, recorder, fixture);
});

testWidgets('masked cupertino sliders', (tester) async {
recorder = SessionReplayRecorder(
defaultCapturePrivacy: TreeCapturePrivacy(
textAndInputPrivacyLevel: TextAndInputPrivacyLevel.maskAllInputs,
imagePrivacyLevel: ImagePrivacyLevel.maskNone,
),
touchPrivacyLevel: TouchPrivacyLevel.show,
);
recorder.updateContext(context);

// With maskAllInputs every thumb should be anchored at the track midpoint
// regardless of the supplied value (0.0, 0.5, 1.0 should all look the same).
final fixture = MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Masked Cupertino Sliders')),
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CupertinoSlider(value: 0.0, onChanged: (_) {}),
CupertinoSlider(value: 0.5, onChanged: (_) {}),
CupertinoSlider(value: 1.0, onChanged: (_) {}),
CupertinoSlider(
value: 0.5,
onChanged: (_) {},
activeColor: CupertinoColors.systemPurple,
thumbColor: CupertinoColors.systemPurple,
),
CupertinoSlider(value: 0.5, onChanged: null),
CupertinoSlider(value: 0.5, divisions: 5, onChanged: (_) {}),
],
),
),
),
),
);
await snapshotTest(tester, recorder, fixture);
});
}
Loading