ionic-framework - 改变 ionic 范围内的刻度线高度

Question

我正在尝试实现一些使用 ion-range 的函数作为输入。功能没问题，我的问题与 ion-range 元素的美学问题有关。尽管在文档中有实现刻度的选项，但它们与条形图高度相同，如果应用的主色不够暗，则很难看出它们。

我设法通过开发控制台对其进行了修改，并且能够获得我想要的样式。我试图修改创建的 .range-tick 类，但无济于事。我看到一个similar question更改范围引脚的样式，但如何访问范围刻度的此选项？

我开发控制台我可以看到目前的风格是这样的:

.range-tick {
    position: absolute;
    top: calc((var(--height) - var(--bar-height)) / 2);
    width: var(--bar-height);
    height: var(--bar-height);
    background: var(--bar-background-active);
    z-index: 1;
    pointer-events: none;
}

来自 this question suggestion我试图在我的 :root (src/theme/variables.scss) 中添加当前为空的变量 --bar-height，但这不会改变任何东西。

我想修改类以包含此选项:

.range-tick {
    position: absolute;
    top: 25%; // <-- Changed
    width: var(--bar-height);
    height: 20px; // <-- Changed
    background: var(--bar-background-active);
    z-index: 1;
    pointer-events: none;
}

我还尝试修改位于 project_folder/node_modules/@ionic/core/dist 中的 range.md.css 和 range.ios.css 文件/collection/components/range/，这与我在开发控制台中看到的一模一样。修改类并重新编译后没有任何变化，在开发控制台检查器中我可以看到该类仍在使用初始类而不是修改后的类。

---

我在 ionic 论坛上看到一些人的评论说这只能由 Ionic 团队更改，所以我创建了一个 new issue .

Answer 1

您可以使用 CSS 阴影部分。

1. 为所有非事件刻度设置样式

ion-range::part(tick){
    height: 10px;
    width: 10px;
    top: 16px;
    border-radius: 50%;
}

1. 设置所有事件刻度的样式

ion-range::part(tick-active){
    height: 10px;
    width: 10px;
    top: 16px;
    border-radius: 50%;
}

更多可以引用https://ionicframework.com/docs/api/range#css-shadow-parts