diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss index 1fb063e4da..749f853993 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 52b2967bcb..56e21ac4a3 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 504bafc8b4..319e2f7b8a 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 d1b3f61870..5afbf88c62 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 98cd79b00c..847e72e4af 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 0000000000..82b95add1c 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 0000000000..5d8ec45269 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 0000000000..97108ebcae 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