Range color not applied on phone

1

Hi!
I’m using multiple range controls, which work fine in Chrome. But as soon as I start the app on my device (Galaxy S3) the color of the range class is not applied anymore. Same goes for emulating other devices with genymotion.

Any hints on that?

2

This is a know problem. The problem is is that some of the css selectors aren’t supported on certain versions of android.

Here’s the Scss file for it

  &::-webkit-slider-thumb:before {
    /* what creates the colorful line on the left side of the slider */
    position: absolute;
    top: ($range-slider-height / 2) - ($range-track-height / 2);
    left: -2001px;
    width: 2000px;
    height: $range-track-height;
    background: $dark;
    content: ' ';
  }
3

thanks! i’m not using scss

in my css file I already have

 input[type="range"]::-webkit-slider-thumb:before {
/* what creates the colorful line on the left side of the slider */
position: absolute;
top: 8px;
left: -2001px;
width: 2000px;
height: 4px;
background: #444;
content: ' '; }

which looks, as if it was the same as your code? am I missing the difference somewhere?

4

Ha, no the scss files get processed into the css file so it’s basically the same thing :smile:
Basically its a case of graceful degradation. In some cases, you may not get the bells and whistles but you’ll still get some of the functionality.

5

so there’s no workaround so far? :frowning:

6

If a platform doesnt support a feature then yes lol :smile:. This is a case where we’re actually okay with the degradation.

7

Oh no! That means this cant be implemented now. (Good lord! Why don’t browsers support input [type= range] -webkit-slider-thumb:before)
As of now I am looking at JQM's Slider widget and trying to rewrite it in AngularJS

8

i found following solution (https://github.com/driftyco/ionic/issues/532) for the problem, but I’m struggling to apply it properly ?

here’s the fix:

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; 
}

and the original lines in ionic.css:

input[type="range"]::-webkit-slider-thumb {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 1px 3px 5px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    -webkit-appearance: none; }


  input[type="range"]::-webkit-slider-thumb:after {
    /* create a larger (but hidden) hit area */
    position: absolute;
    top: -20px;
    left: -20px;
    padding: 30px;
    content: ' '; }

.range {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  padding: 2px 4px; }
  .range.range-light input::-webkit-slider-thumb:before {
    background: #ddd; }
  .range.range-stable input::-webkit-slider-thumb:before {
    background: #b2b2b2; }
  .range.range-positive input::-webkit-slider-thumb:before {
    background: #4a87ee; }
  .range.range-calm input::-webkit-slider-thumb:before {
    background: #43cee6; }
  .range.range-balanced input::-webkit-slider-thumb:before {
    background: #66cc33; }
  .range.range-assertive input::-webkit-slider-thumb:before {
    background: #ef4e3a; }
  .range.range-energized input::-webkit-slider-thumb:before {
    background: #f0b840; }
  .range.range-royal input::-webkit-slider-thumb:before {
    background: #8a6de9; }
  .range.range-dark input::-webkit-slider-thumb:before {
    background: #444; }

any css professional in here who knows how to fix this? :smile:

9

nobody? I’m sure a lot of people are interested in a bugfix for that. It even appears on Kit Kat phones.

10

It does not appear on kitkat. I have tried it myself.

11

The range input is due for a directive of its own, but as of now, there are bigger fish to fry. But remember, this is an Open Source Project, if you guys want to write your own directives then make a pull request, you can :smile:

12

Hi!
Has the problem already been solved in newer releases? Thanks a lot!

13

Short answer no, like I’ve said, there are bigger fish to fry and more high priority things to fix first.
Range slider wont get it’s own directive until post 1.0 probably.

But you can write a directive yourself to fit your own needs