将边框颜色添加到范围旋钮离子范围 [英] Add border color to range knob ionic-range

问题描述

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

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?

推荐答案

尝试一下:

page.scss

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

这篇关于将边框颜色添加到范围旋钮离子范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！