From 48e9ba77d20f5ad3600b9512f3b3a98b29066b1e Mon Sep 17 00:00:00 2001 From: rdlabo Date: Sat, 7 Mar 2026 14:36:20 +0900 Subject: [PATCH 1/5] feat(range): update range bar radius --- src/styles/components/ion-range.scss | 101 ++++++++++++++++++++------- 1 file changed, 75 insertions(+), 26 deletions(-) diff --git a/src/styles/components/ion-range.scss b/src/styles/components/ion-range.scss index e970810..abaad86 100644 --- a/src/styles/components/ion-range.scss +++ b/src/styles/components/ion-range.scss @@ -16,6 +16,8 @@ ion-range.md:not(.md3-disabled) { &::part(knob) { width: 4px; + transition: width var(--token-expressive-fast-effects); + will-change: width; height: var(--knob-size); background: var(--ion-color-primary); transform: translateX(calc(var(--knob-size) / 2 - 2px)); @@ -24,49 +26,96 @@ ion-range.md:not(.md3-disabled) { } } - &:not(.range-value-min):not(.range-value-max)::part(knob) { - outline: 6px solid var(--ion-background-color, #ffffff); - } - &.ion-color::part(knob) { background: var(--ion-color-base, var(--ion-color-primary)); } - &.range-pressed::part(knob) { - width: 2px; - } &::part(tick), &::part(tick-active) { --bar-height: 4px; } - &::part(bar-active) { - border-top-right-radius: calc(var(--knob-border-radius) / 2); - border-bottom-right-radius: calc(var(--knob-border-radius) / 2); - margin-right: 6px; - } + &:not(.range-dual-knobs) { + &.range-pressed::part(knob) { + width: 2px; + transform: translateX(calc(var(--knob-size) / 2 - 1px)); + } - &.range-value-min { - &::part(bar) { - border-top-left-radius: calc(var(--knob-border-radius) / 2); - border-bottom-left-radius: calc(var(--knob-border-radius) / 2); - width: calc(100% - 6px); - right: 0; + &:not(.range-value-min):not(.range-value-max)::part(knob) { + outline: 6px solid var(--ion-background-color, #ffffff); + } + &.range-pressed:not(.range-value-min):not(.range-value-max)::part(knob) { + outline: 7px solid var(--ion-background-color, #ffffff); } - } - &.range-value-max { - &::part(bar) { + &:not(.range-value-max)::part(bar-active) { border-top-right-radius: calc(var(--knob-border-radius) / 2); border-bottom-right-radius: calc(var(--knob-border-radius) / 2); - width: calc(100% - 6px); - left: 0; + margin-right: 6px; + } + + &.range-value-min { + &::part(bar) { + border-top-left-radius: calc(var(--knob-border-radius) / 2); + border-bottom-left-radius: calc(var(--knob-border-radius) / 2); + width: calc(100% - 6px); + right: 0; + } + } + + &.range-value-max { + &::part(bar), + &::part(bar-active) { + border-top-right-radius: calc(var(--knob-border-radius) / 2); + border-bottom-right-radius: calc(var(--knob-border-radius) / 2); + width: calc(100% - 6px); + left: 0; + } } } - &[dual-knobs]::part(bar-active) { - border-radius: calc(var(--knob-border-radius) / 2); - margin-left: 6px; + &.range-dual-knobs { + &.range-pressed-a::part(knob-a), + &.range-pressed-b::part(knob-b) { + width: 2px; + transform: translateX(calc(var(--knob-size) / 2 - 1px)); + } + + &.range-value-min { + &::part(bar), + &::part(bar-active) { + border-top-left-radius: calc(var(--knob-border-radius) / 2); + border-bottom-left-radius: calc(var(--knob-border-radius) / 2); + margin-left: 6px; + } + ::part(bar) { + width: calc(100% - 6px); + } + } + &.range-value-max { + &::part(bar), + &::part(bar-active) { + border-top-right-radius: calc(var(--knob-border-radius) / 2); + border-bottom-right-radius: calc(var(--knob-border-radius) / 2); + margin-right: 6px; + } + &::part(bar) { + width: calc(100% - 6px); + } + } + &.range-value-min.range-value-max::part(bar) { + width: calc(100% - 12px); + } + + &:not(.range-value-min)::part(knob-lower), + &:not(.range-value-max)::part(knob-upper) { + outline: 6px solid var(--ion-background-color, #ffffff); + } + + &.range-pressed:not(.range-value-min)::part(knob-lower), + &.range-pressed:not(.range-value-max)::part(knob-upper) { + outline: 7px solid var(--ion-background-color, #ffffff); + } } &::part(pin) { From c9a3fad54bf1677775fa192eac494677b306a938 Mon Sep 17 00:00:00 2001 From: Masahiko Sakakibara Date: Sat, 7 Mar 2026 14:41:59 +0900 Subject: [PATCH 2/5] Update src/styles/components/ion-range.scss Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- src/styles/components/ion-range.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/components/ion-range.scss b/src/styles/components/ion-range.scss index abaad86..0fd6435 100644 --- a/src/styles/components/ion-range.scss +++ b/src/styles/components/ion-range.scss @@ -88,7 +88,7 @@ ion-range.md:not(.md3-disabled) { border-bottom-left-radius: calc(var(--knob-border-radius) / 2); margin-left: 6px; } - ::part(bar) { + &::part(bar) { width: calc(100% - 6px); } } From 219623b26913b847840cf834d3fb2d35182ae643 Mon Sep 17 00:00:00 2001 From: Masahiko Sakakibara Date: Sat, 7 Mar 2026 14:45:21 +0900 Subject: [PATCH 3/5] Update src/styles/components/ion-range.scss Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- src/styles/components/ion-range.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/components/ion-range.scss b/src/styles/components/ion-range.scss index 0fd6435..ff34473 100644 --- a/src/styles/components/ion-range.scss +++ b/src/styles/components/ion-range.scss @@ -16,7 +16,7 @@ ion-range.md:not(.md3-disabled) { &::part(knob) { width: 4px; - transition: width var(--token-expressive-fast-effects); + transition: width var(--token-expressive-fast-effects), transform var(--token-expressive-fast-effects); will-change: width; height: var(--knob-size); background: var(--ion-color-primary); From f0d166c8d478a5a7875a60ed4c7b9056aad620b8 Mon Sep 17 00:00:00 2001 From: rdlabo Date: Sat, 7 Mar 2026 14:49:00 +0900 Subject: [PATCH 4/5] fmt --- src/styles/components/ion-range.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/styles/components/ion-range.scss b/src/styles/components/ion-range.scss index ff34473..7632de4 100644 --- a/src/styles/components/ion-range.scss +++ b/src/styles/components/ion-range.scss @@ -16,7 +16,9 @@ ion-range.md:not(.md3-disabled) { &::part(knob) { width: 4px; - transition: width var(--token-expressive-fast-effects), transform var(--token-expressive-fast-effects); + transition: + width var(--token-expressive-fast-effects), + transform var(--token-expressive-fast-effects); will-change: width; height: var(--knob-size); background: var(--ion-color-primary); @@ -43,6 +45,7 @@ ion-range.md:not(.md3-disabled) { &:not(.range-value-min):not(.range-value-max)::part(knob) { outline: 6px solid var(--ion-background-color, #ffffff); + transition: outline var(--token-expressive-fast-effects); } &.range-pressed:not(.range-value-min):not(.range-value-max)::part(knob) { outline: 7px solid var(--ion-background-color, #ffffff); @@ -110,6 +113,7 @@ ion-range.md:not(.md3-disabled) { &:not(.range-value-min)::part(knob-lower), &:not(.range-value-max)::part(knob-upper) { outline: 6px solid var(--ion-background-color, #ffffff); + transition: outline var(--token-expressive-fast-effects); } &.range-pressed:not(.range-value-min)::part(knob-lower), From b66ae5982e3d8b6ff16b9d267eb9c4d303846faf Mon Sep 17 00:00:00 2001 From: rdlabo Date: Sat, 7 Mar 2026 14:55:51 +0900 Subject: [PATCH 5/5] chore: fixed transition overwrite --- src/styles/components/ion-range.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/styles/components/ion-range.scss b/src/styles/components/ion-range.scss index 7632de4..bf36cda 100644 --- a/src/styles/components/ion-range.scss +++ b/src/styles/components/ion-range.scss @@ -18,7 +18,8 @@ ion-range.md:not(.md3-disabled) { width: 4px; transition: width var(--token-expressive-fast-effects), - transform var(--token-expressive-fast-effects); + transform var(--token-expressive-fast-effects), + outline var(--token-expressive-fast-effects); will-change: width; height: var(--knob-size); background: var(--ion-color-primary); @@ -45,7 +46,6 @@ ion-range.md:not(.md3-disabled) { &:not(.range-value-min):not(.range-value-max)::part(knob) { outline: 6px solid var(--ion-background-color, #ffffff); - transition: outline var(--token-expressive-fast-effects); } &.range-pressed:not(.range-value-min):not(.range-value-max)::part(knob) { outline: 7px solid var(--ion-background-color, #ffffff); @@ -113,7 +113,6 @@ ion-range.md:not(.md3-disabled) { &:not(.range-value-min)::part(knob-lower), &:not(.range-value-max)::part(knob-upper) { outline: 6px solid var(--ion-background-color, #ffffff); - transition: outline var(--token-expressive-fast-effects); } &.range-pressed:not(.range-value-min)::part(knob-lower),