Skip to content

Filter by Price slider uses current color in LTR languages but it's purple in RTL languages #54148

@Aljullu

Description

@Aljullu

For some reason, the Filter by Price slider color is hardcoded to purple in RTL languages.

Steps to reproduce

  1. Create a page and add the Filter by Price and Product Collection blocks.
  2. Go to the frontend and notice the Filter by Price slider uses the current font color (likely black).
  3. Switch your store language to a RTL language (ie: Arabic).
  4. Reload the page created previously and notice the slider is now purple.
LTR RTL
Image Image

Expected behavior: in any language the slider color should inherit the font color.

I think the relevant code can be found here:

.rtl {
.wc-block-components-price-slider__range-input-progress {
--track-background: linear-gradient(to left, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
--range-color: #{$studio-woocommerce-purple-30};
background: var(--track-background);
}
}

Metadata

Metadata

Assignees

Labels

BugThe issue is a confirmed bug.Good First IssueThe issue is a good candidate for the first community contribution/for a newcomer to the team.KirigamiWC Store Editing (FSE)block: filter by priceIssues related to the Filter by Price block.

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions