ion-range input behaves incorrectly if rotated

andre-arsenault commented 7 years ago

Ionic version: (check one with "x") [ ] 1.x [ ] 2.x [x] 3.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request

Current behavior: The ion-range control's thumb slider's position in response to input events is always relative to the left-side of the element on the page, regardless of the element's current orientation.

I am building an app with multiple "player spaces" with the intention that players sit at opposite ends of a single device. Each player's space is rotated so that it appears "right side up" to them. The ion-range control misbehaves in this use case.

Expected behavior: The thumb slider should follow the input at any control orientation. Specific use cases are 90, 180, and 270 degree rotations. In vertical orientations (90 and 270), the thumb should move based on vertical movement of the input method (mouse/touch).

Steps to reproduce: Plunker demo

Place an ion-range control in a container that has been rotated with style="transform: rotate(_anything other than zero_)".
Notice that when you click or drag the thumb, movement of the thumb slider does not follow your input, but is interpreted instead as "distance from the left side of the control before any rotation was applied".

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (G:\Projects\ionic-lifetotal\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.0.2
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.5.3

System:

    Android SDK Tools : 26.0.2
    Node              : v6.11.0
    npm               : 5.3.0
    OS                : Windows 10

screenshot_2017-08-21-15-19-17 1

kensodemann commented 7 years ago

Hello! Thank you for opening an issue with us! We will have a look at this.

Thank you for using Ionic

AmitMY commented 7 years ago

It is a known limitation, as ionic takes the even't coordinates. I have a fix for that in a PR - https://github.com/ionic-team/ionic/pull/12004 that will just require you to set that player's range with dir="rtl"

kensodemann commented 7 years ago

@AmitMY - Question. Does your PR also address the OPs concerns about 90deg and 270 deg rotation (that is, showing the ion-range vertically)? Or does it only address RTL support with the range horizontal?

AmitMY commented 7 years ago

It addresses the 180deg rotation. About direction, it gonna need a orientation="vertical|vertical-inverted|horizontal|horizontal-inverted" and a really small change in the code, to either take (what currently is x) y, 1-y, x, 1-x But I will not make a PR now as it won't be merged any time soon

andre-arsenault commented 7 years ago

Thanks for the info so far!

I intend to ship my app within two weeks. Considering @AmitMY 's pull request has been open for more than two months, what are my options?

Will his pull request be approved and a new version of Ionic pushed before then?
Should I apply his change to my local installation? (This seems like a sketchy thing to do.)
Should I drop ion-range and roll my own slider that works for my use cases?
Can I get this issue escalated to be resolved properly by the Ionic team?

AmitMY commented 7 years ago

Not likely
You can. The recommended way is to fork this repo, and to merge my PR to your own fork, then build the distribution folder (there is a script)
I think this is for you to decide...
Not really. All issues are important, and when PRs are merged again, it is really an easy fix.

andre-arsenault commented 7 years ago

I spent the morning following option 2 (forking the repo and applying your changes to it). Once I got everything running correctly, I realised that your solution isn't what I need.

Using dir="rtl" does indeed make the range knob follow the input correctly, but the whole slider is flipped around. The "min" value is on the right and the "max" value is on the left. For an actual RTL slider, that is correct behaviour. However I need an LTR slider whose knob follows the input regardless of rotation. Not quite the same thing, unfortunately. I tried setting the "max" to 0 and the "min" to 10, but that renders the slider inoperable.

I think I'm going to have to do option 3 and roll my own instead of using ion-range. Rather unfortunate, given that using the built-in components is a big reason for using Ionic in the first place.

I'm open to other suggestions, cheers!

AmitMY commented 7 years ago

oops, my bad. If you already forked and what not, the solution is simple. Use only the new _calcRatio method - https://github.com/ionic-team/ionic/pull/12004/files#diff-83239da88903453f22312d13f7b81defR288

Add an @Input to the component, of isFlipped, and just use the current setup (still LTR), but if isFlipped it is 1 - ratio, but if is not flipped, just ratio

I think that would work.

kensodemann commented 7 years ago

Hello! Thank you for opening an issue with us!

I have marked this issue as something that we will look at some time after the initial v4 release.

Thank you for using Ionic

cmer4 commented 6 years ago

I would agree if ion-range doesn't have built-in vertical mode - at least there should be an option to create vertical range using transform rotate but then component should support configuration;/

ionitron-bot[bot] commented 5 years ago

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

ionitron-bot[bot] commented 5 years ago

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/885

ionic-team / ionic-framework

ion-range input behaves incorrectly if rotated #12713