改变离子范围内的刻度高度

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，我尝试将当前为空的变量--bar-height 添加到我的:root (src/theme/variables.scss) 中，但这不会改变任何内容。

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

.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/collection/components/range/ 中的range.md.css 和range.ios.css 文件，这与我在开发控制台中看到的完全一样。修改类并重新编译后没有任何改变，在开发控制台检查器中，我可以看到该类仍在使用初始类，而不是修改后的类。

---

我在 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