Skip to content

feat(range): update range bar radius #5

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
rdlabo merged 5 commits into from
Mar 7, 2026
Merged

feat(range): update range bar radius #5

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
48e9ba7
feat(range): update range bar radius
rdlabo Mar 7, 2026
c9a3fad
Update src/styles/components/ion-range.scss
rdlabo Mar 7, 2026
219623b
Update src/styles/components/ion-range.scss
rdlabo Mar 7, 2026
f0d166c
fmt
rdlabo Mar 7, 2026
b66ae59
chore: fixed transition overwrite
rdlabo Mar 7, 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
104 changes: 78 additions & 26 deletions src/styles/components/ion-range.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ ion-range.md:not(.md3-disabled) {

&::part(knob) {
width: 4px;
transition:
width 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);
transform: translateX(calc(var(--knob-size) / 2 - 2px));
Expand All @@ -24,49 +29,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);
}
Comment on lines +80 to +121
Copy link
Copy Markdown
Contributor

@devin-ai-integration devin-ai-integration bot Mar 7, 2026

Choose a reason for hiding this comment

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

🟡 Dual-knobs bar-active loses gap/rounding when knobs are not at extreme positions

In the old code, the active bar in dual-knob mode always had border-radius and margins on both sides (via the general &::part(bar-active) rule at old line 42-46 and the &[dual-knobs]::part(bar-active) rule at old line 66-68), creating a visual gap between the bar and the knobs. In the new code (src/styles/components/ion-range.scss:84-105), left-side rounding/margin is only applied when .range-value-min and right-side rounding/margin only when .range-value-max. In the common case where neither knob is at its extreme, bar-active gets no border-radius and no margins, causing it to visually butt up against the knobs without the intended gap. This is inconsistent with the single-knob behavior where bar-active always gets right rounding/margin when not at max (line 51-55).

Prompt for agents 
In src/styles/components/ion-range.scss, inside the `&.range-dual-knobs` block (lines 77-119), add general bar-active styling that applies regardless of min/max state, similar to what existed in the old code. Specifically, add a rule like:

&::part(bar-active) {
  border-radius: calc(var(--knob-border-radius) / 2);
  margin-left: 6px;
  margin-right: 6px;
}

This should be placed after line 82 (after the pressed knob rules) and before the .range-value-min block at line 84. This ensures the active bar always has rounded corners and visual gaps from the knobs in dual-knob mode, matching the old behavior and being consistent with the single-knob bar-active styling at lines 51-55.
Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

}

&::part(pin) {
Expand Down