从角度材质原生组件创建两个值范围滑块
从角度材质原生组件创建两个值范围滑块
提问于 2021-01-20 05:38:30
我需要为我的应用程序提供两个值范围的滑块，但是我在NPM等网站上看到的包都不是100%适合我所需要的。角度材质滑块是最合适的，但是它不允许在单个滑块上使用两个值。
为了解决这个问题，我有了一个想法，把一个滑块放在另一个滑块上，给人一个滑块有两个值的印象。这工作得很好，并且有一个平滑的行为，这是我想让我的滑块具有的要求之一。
但是，我还想在两个滑块拇指之间添加一个条，以便所选范围突出显示并可见。原生滑块确实有这一点，但由于它只允许一个值，因此高亮显示从0开始并延伸到滑块的值。
相反，我希望在滑块上高亮显示拇指的上下值之间。但我不知道如何将它添加到其中。所以我想知道有没有人能帮帮我。我不能完全确定我是否需要在条的顶部添加一个新的元素来调整两个拇指之间的大小，或者我是否必须做一些不同的事情。
或者，如果有人知道如何使NGX-滑块允许像角度材料滑块一样平滑的步骤，那将是最好的解决方案，我很想听听。https://www.npmjs.com/package/@angular-slider/ngx-slider
https://angular-9-material-starter-5ueh7p.stackblitz.io
到目前为止的代码
<mat-slider class="slider-left"></mat-slider>
<mat-slider class="slider-right"></mat-slider>
.slider-right {
position: relative;
left: -128px;
}
::ng-deep .mat-slider-track-fill {
background-color: rgba(0, 0, 0, 0.26) !important;
}
::ng-deep .mat-slider-track-background {
background-color: rgba(0, 0, 0, 0.26);
}回答 1
Stack Overflow用户
发布于 2021-07-11 15:47:40
我认为您可以使用以下代码来实现这一点：
<mat-slider id="to-slider"></mat-slider>
<mat-slider id="from-slider"></mat-slider>#from-slider {
margin-top: -75px;
}
::ng-deep {
#from-slider {
.mat-slider-track-fill {
background-color: GRAY_COLOR;
}
.mat-slider-track-background {
background-color: transparent;
}
}
#to-slider {
.mat-slider-track-background {
background-color: GRAY_COLOR;
}
}
}只需注意GRAY_COLOR不应该具有透明性！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65799897
复制相关文章
相似问题
腾讯云开发者
