Is range broken under android (4.3) within tabs?


#1

Hi everyone,

I might ask a stupid question, but I’ve tried to add a range field within a tab without any success.

Here is what I’ve done. I am not sure if I have done something wrong but I really don’t understand why I can’t change the range value while I slide my finger over.

Some help would be greatly appreciated because I am a newbie and I would really like to understand where my error is :wink:

Thanks in advance,

Jon


#2

I’m having no problems with the range input, could you post a codepen or plunkr of your code?


#3

Same for me … range not working and the range bar not showing properly on Android 4.3 (HTC ONE).


#4

Yeah I can confirm this… looks like input[type=‘range’]::-webkit-slider-thumb::before and input[type=‘range’]::-webkit-slider-thumb::after pseudo-elements aren’t supported by the stock android browser in 4.0-4.3.

Good catch guys, opened a new issue: https://github.com/driftyco/ionic/issues/532


#5

Hi,

Thanks for your reply.
Codepen is: http://codepen.io/starmate/full/lJjkH
I’ll try to check what could cause the trouble if I can (I am not an expert but I will have a look ;)).

Thanks again,

Jon


#6

Hi everyone,

This is a partial solution to the issue (from ionic.css):

input[type=“range”] {
display: inline-block;
overflow: hidden;
margin-top: 5px;
margin-bottom: 5px;
padding-right: 2px;
padding-left: 1px;
width: auto;
/height: 35px;/
min-height: 35px;
outline: none;
/background: linear-gradient(to right, #cccccc 0%, #cccccc 100%);/
background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(100%, #cccccc));
background-position: center;
background-size: 99% 4px;
background-repeat: no-repeat;
-webkit-appearance: none;
}

What’s commented is what was causing the issue with android. However, the drag and drop feature doesn’t work… I am still looking for a solution regarding this problem.

Jon


#7

Hi again,

I was finally be able to use touch to slide feature on rage fields.
It was my fault. I had the following:

<body ng-app="starter" animation="slide-left-right-ios7" no-scroll>

Which I changed to:

<body ng-app="starter" animation="slide-left-right-ios7">

no-scroll was causing the issue.

Jon


#8

Thanks to @starmate just pushed a fix for this, should be working on android 4.0-4.3 now. Let me know if there are still issues.


#9

Hi there,

Its still not working for me. The range slider looks distorted. I have tested on android 4.1.2 on samsung mobiles. The range slider looks fine on 4.4

I am using latest ionic version(v1.0.0-beta.13-nightly-790) . I am also attaching a screenshot of how it looks.