Range input do not slide after use of text Input

ionic-v1
1

Hi, i got an issue.

I use ionic 1.0.0 beta13 and was not able to find similar problem on forums or net.

On android, Range input stop working when focus goes on a text input on the same page.

My range input only detect tap but not slide.

The text input:

<div class="item item-input">
    <span class="input-label">
        <span class="icon ion-location icon-blue"></span>
        {{"SEARCH.PLACE" | translate}}
    </span>
    <input type="text" ng-model="inputField" >

</div>

The range input:

 <div class="item range range-positive list-inset">
    1 <input type="range" name="volume" min="1" max="30" value="10" ng-model="search.distance"> 30
</div>

This occur on all range input I got on the page.

Did I made something wrong or is this an issue ?
Thanks for answers.

2

I reported a issue.

Does anyone got this too ?

3

I’ve got the same problem on iOS too.
Don’t know if it can help to investigate, but if I remove ion-content tag the problem is gone, but of course I can’t scroll anymore.

4

Thanks !

Think it should help.

5

Hi,

I am encountering the exact same problem and loosing the scroll by removing the ion-content element won’t do the trick as my form is too big and really needs to be scrollable.

On android, you cannot move the slider but you can still click on the slide bar behind. So the range input is almost usable.
Unfortunately, on ios, once the keyboard is displayed the range input cannot be used at all and since the user cannot hide the keyboard this makes it impossible to fill the form.

Any news on this issue ?

Regards.

6

Seeing the same thing on iOS. If I remove focus from the text box completely, the slider starts working again. Not ideal.

7

My solution to this issue is to blur the problem input when the on-tap and on-drag events are triggered on the range slider.

function sliderFix(){
//config
var el = document.querySelector(‘.target-weight input’);

//check if target weight is the focused input
if(document.activeElement !== el){ return; }

//if the input does have focus, blur it
el.blur();
}