@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