diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss index 1fb063e4da6..749f853993d 100644 --- a/core/src/components/range/range.ionic.scss +++ b/core/src/components/range/range.ionic.scss @@ -200,3 +200,10 @@ :host(.in-item.range-label-placement-stacked) .native-wrapper { @include margin(null, null, globals.$ion-space-0, null); } + +// Range Focus +// ---------------------------------------------------------------- + +.range-knob-handle.ion-focused .range-knob { + @include globals.focused-state(); +} diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png index 52b2967bcbc..56e21ac4a3d 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png index 504bafc8b41..319e2f7b8a9 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png index d1b3f618708..5afbf88c62b 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts b/core/src/components/range/test/states/range.e2e.ts index 98cd79b00c0..847e72e4afd 100644 --- a/core/src/components/range/test/states/range.e2e.ts +++ b/core/src/components/range/test/states/range.e2e.ts @@ -72,3 +72,27 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { }); }); }); + +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('range: states'), () => { + test('should render focus state', async ({ page }) => { + await page.setContent( + ` + + + + + `, + config + ); + + const range = page.locator('ion-range'); + + const handle = range.locator('.range-knob-handle'); + + handle.focus(); + + await expect(range).toHaveScreenshot(screenshot(`range-focus`)); + }); + }); +}); diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..82b95add1c4 Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5d8ec452695 Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..97108ebcaed Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png differ