CODEWITHSUNDEEP
cssionic-frameworkionic4
MJ2410
MJ2410

Reputation: 518

Add border color to range knob ionic-range

I am using the ion-range to add a range slider and would like to add a border to the range-knob. Since its ionic4 and the range-knob is a part of the shadow dom i cannot directly change the border using the border property for the range knob. I have attached the image which I am trying to achieve.A white border around the range knob. The existing properties only has a box shadow property that is close to my requirement but still doesnt give results exactly like the image. How can I add a border to the knob?

enter image description here

Upvotes: 1

Views: 1552

Answers (1)

Najam Us Saqib
Najam Us Saqib

Reputation: 3402

Try this:

page.scss

ion-range{
    --knob-background: #02a7de;
    --bar-background-active: #02a7de;
    --bar-background: #02a7de;
    --bar-height: 6px;
    --knob-size: 18px;
    --knob-border-radius: 50%;
    --bar-border-radius: 20px;
    --knob-box-shadow: 0px 0px 0px 3px #fff;
}

Upvotes: 6

Related Questions