Skip to content

fix(range): update tick styling and border radius to match Figma#31080

Open
OS-giulianasilva wants to merge 4 commits intonextfrom
ROU-12467-ticks-styling
Open

fix(range): update tick styling and border radius to match Figma#31080
OS-giulianasilva wants to merge 4 commits intonextfrom
ROU-12467-ticks-styling

Conversation

@OS-giulianasilva
Copy link
Copy Markdown
Contributor

@OS-giulianasilva OS-giulianasilva commented Apr 14, 2026

Issue number: resolves internal


What is the current behavior?

  • When the range has ticks="true", the active bar segment is forced to a 0 border radius, while the inactive segment remains rounded.
  • Tick height, width and border radius do not match Figma specifications.
  • The tick and bar backgrounds use different colors.

What is the new behavior?

  • Removed the explicit border radius reset from .has-ticks and instead rely on the host class variable --bar-border-radius.
  • Updated the tick's width, height and border radius.
  • Changed the background color of .range-tick from a hardcoded neutral value to a CSS variable --bar-background, ensuring the ticks and bar share the same color.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Before:

image

After:

image

OS-giulianasilva and others added 4 commits April 14, 2026 10:37
- set the `--bar-border-radius` to 0 when `ion-range` has `.ticks`. previously, the bar border radius 0 was only set to the active bar.
- updated the tick's width and height
- updated the tick brackground to match the bar background
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 14, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment Apr 14, 2026 1:21pm

Request Review

@github-actions github-actions bot added the package: core @ionic/core package label Apr 14, 2026
@OS-giulianasilva OS-giulianasilva changed the title Rou 12467 ticks styling fix(range): update tick styling and border radius to match Figma Apr 14, 2026
@OS-giulianasilva OS-giulianasilva marked this pull request as ready for review April 14, 2026 13:49
@OS-giulianasilva OS-giulianasilva requested a review from a team as a code owner April 14, 2026 13:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants