Override Ionic default style for the Range input

ionic-v1
1

Hi everyone,

I have a problem customizing Range input. When I try to apply custom style for it in my .css/.scss file, it doesn’t override ionic defaults, but does something like creating a new slider close to the default-styled one.

For example, the default one is like this image

When I apply some style, for example

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 80%;
  float:left;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #6d6d6d;
  border-radius: 25px;
  border: 0px solid #000101;
  float: left;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 2px 1px 1px rgba(0, 0, 0, .1), 0px 5px 10px 2px rgba(0, 0, 0, .15);
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background: #f00;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8.5px;
}

I get the following result
image

So, the thumb styling is working fine, but not the runnable-track styling.

What am I doing wrong?

2 Likes
2

Any solution for that? Got the same error here, no matter how many styles I catch from internet… i can’t get that semiblack line off… :frowning:

3

I am also facing the same issue. Secondly is there any tooltip sort of thing available when I scroll the range slider ?

Thank you.

4

This worked for me for Android but not in iOS. Will post a fix for that here if I can figure it out!

    background: #000 !important;
    margin-top: -6px !important;
}```