Skip to content
Permalink
Browse files

fix(range): implement RTL (from PR 17157) (#17384)

- MD PIN fixes not committed because they depend on mixin changes

references #17012
  • Loading branch information...
abennouna authored and brandyscarney committed Feb 12, 2019
1 parent d0a9fac commit 4f203bc23021927995a5cac4418c8de07439a4b9
Showing with 76 additions and 16 deletions.
  1. +5 −0 core/src/components/range/range.md.scss
  2. +16 −0 core/src/components/range/range.scss
  3. +55 −16 core/src/components/range/range.tsx
@@ -105,6 +105,11 @@
@include border-radius(50%, 50%, 50%, 0);
@include margin-horizontal(-13px, null);

@include rtl() {
/* stylelint-disable-next-line property-blacklist */
left: unset;
}

position: absolute;

width: 26px;
@@ -79,6 +79,11 @@
null
);

@include rtl() {
/* stylelint-disable-next-line property-blacklist */
left: unset;
}

position: absolute;

width: var(--knob-handle-size);
@@ -95,6 +100,12 @@
.range-bar {
@include border-radius(var(--bar-border-radius));
@include position(calc((var(--height) - var(--bar-height)) / 2), null, null, 0);

@include rtl() {
/* stylelint-disable-next-line property-blacklist */
left: unset;
}

position: absolute;

width: 100%;
@@ -113,6 +124,11 @@
calc(50% - var(--knob-size) / 2)
);

@include rtl() {
/* stylelint-disable-next-line property-blacklist */
left: unset;
}

position: absolute;

width: var(--knob-size);
@@ -235,7 +235,11 @@ export class Range implements ComponentInterface {
const currentX = detail.currentX;

// figure out which knob they started closer to
const ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
if (document.dir === 'rtl') {
ratio = 1 - ratio;
}

this.pressedKnob =
!this.dualKnobs ||
Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)
@@ -262,6 +266,10 @@ export class Range implements ComponentInterface {
// update the knob being interacted with
const rect = this.rect;
let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
if (document.dir === 'rtl') {
ratio = 1 - ratio;
}

if (this.snaps) {
// snaps the ratio to the current value
ratio = valueToRatio(
@@ -353,31 +361,56 @@ export class Range implements ComponentInterface {
render() {
const { min, max, step, ratioLower, ratioUpper } = this;

const barL = `${ratioLower * 100}%`;
const barR = `${100 - ratioUpper * 100}%`;
const barStart = `${ratioLower * 100}%`;
const barEnd = `${100 - ratioUpper * 100}%`;

const isRTL = document.dir === 'rtl';
const start = isRTL ? 'right' : 'left';
const end = isRTL ? 'left' : 'right';

const ticks = [];
if (this.snaps) {
for (let value = min; value <= max; value += step) {
const ratio = valueToRatio(value, min, max);
ticks.push({

const tick: any = {
ratio,
active: ratio >= ratioLower && ratio <= ratioUpper,
left: `${ratio * 100}%`
});
};

tick[start] = `${ratio * 100}%`;

ticks.push(tick);
}
}

const tickStyle = (tick: any) => {
const style: any = {};

style[start] = tick[start];

return style;
};

const barStyle = () => {
const style: any = {};

style[start] = barStart;
style[end] = barEnd;

return style;
};

return [
<slot name="start"></slot>,
<div class="range-slider" ref={el => this.rangeSlider = el}>
{ticks.map(t => (
{ticks.map(tick => (
<div
style={{ left: t.left }}
style={tickStyle(tick)}
role="presentation"
class={{
'range-tick': true,
'range-tick-active': t.active
'range-tick-active': tick.active
}}
/>
))}
@@ -386,10 +419,7 @@ export class Range implements ComponentInterface {
<div
class="range-bar range-bar-active"
role="presentation"
style={{
left: barL,
right: barR
}}
style={barStyle()}
/>

{ renderKnob({
@@ -435,6 +465,17 @@ interface RangeKnob {
}

function renderKnob({ knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard }: RangeKnob) {
const isRTL = document.dir === 'rtl';
const start = isRTL ? 'right' : 'left';

const knobStyle = () => {
const style: any = {};

style[start] = `${ratio * 100}%`;

return style;
};

return (
<div
onKeyDown={(ev: KeyboardEvent) => {
@@ -458,9 +499,7 @@ function renderKnob({ knob, value, ratio, min, max, disabled, pressed, pin, hand
'range-knob-min': value === min,
'range-knob-max': value === max
}}
style={{
'left': `${ratio * 100}%`
}}
style={knobStyle()}
role="slider"
tabindex={disabled ? -1 : 0}
aria-valuemin={min}

0 comments on commit 4f203bc

Please sign in to comment.
You can’t perform that action at this time.