Override Ionic default style for the Range input

@filmakarov wrote:

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

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

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

What am I doing wrong?

Posts: 1

Participants: 1

Read full topic