将边框颜色添加到范围旋钮离子范围

Question

我正在使用ion-range来添加范围滑块，并想在range-nob上添加边框。由于它的ionic4和范围旋钮是阴影dom的一部分，因此我无法使用范围旋钮的border属性直接更改边框。我已附上我要获得的图像。范围旋钮周围有白色边框。现有的属性只有一个box shadow属性，它接近于我的要求，但仍然无法提供与图像完全相同的结果。如何在旋钮上添加边框？

Answer 1

尝试一下：

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