paper-slider
paper-slider copied to clipboard
PolymerElements
paper-slider only respects [dir=rtl] but not direction: ltr; in CSS nor nested [dir]
Description
paper-slider added RTL support via :host-context([dir="rtl"]) in https://github.com/PolymerElements/paper-slider/pull/181
This is super, except there are a few ways of changing text direction that it doesn't detect.
For example:
paper-slider {
direction: rtl;
}
or
<html dir="rtl">
<paper-slider dir="ltr">
Expected outcome
Slider's direction and effective text direction agree.
Actual outcome
In some cases, the slider direction differs from the text direction.
Live Demo
https://jsfiddle.net/7qxd7cjx/
Steps to reproduce
- plop
<paper-slider style="direction: rtl;">or<div dir=rtl><paper-slider dir=ltr>onto a page - slide the knob
Browsers Affected
- [X] Chrome
- [X] Firefox
- [X] Safari 9
- [X] Safari 8
- [X] Safari 7
- [X] Edge
- [X] IE 11
- [X] IE 10
(Note: I assume this applies to all browsers but haven't actually checked).
/cc @dschuyler @keanulee
Am I right to assume that @danbeam will no longer be working on this bug? In that case, could someone else take over? I want to force the sliders to be LTR in the Cast dialog WebUI in Chromium, and can do so with a local CSS workaround like the one below, but I'd be happier if such a workaround wasn't necessary.
:host-context([dir="rtl"]) paper-slider[dir="ltr"] {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
@takumif I added a new CSS rule to paper-slider that should help you with that issue - specifically as long as you have dir="ltr" on paper-slider it should override the other rule.
