自定义范围滑块答案

【问题标题】：Custom Range Slider自定义范围滑块
【发布时间】：2019-02-27 20:38:22
【问题描述】：

我正在尝试在 Angular Material 中做一个自定义范围滑块。但我不知道如何更改默认大小和颜色。谁能帮帮我。

HTML

<mat-slider thumbLabel max="30" value="10"></mat-slider>

我得到了什么

我需要什么

【问题讨论】：

您可能需要研究SLIDER 的原始实现并找到您需要更改的地方。
可能更简单：谷歌：“stackblitz angular slider”，找到一些轻量级的并且已经做了很多你需要的东西，调整它。如果您提高 CSS 技能，这肯定会有所帮助。
我改变了颜色，但我无法改变滑块的宽度
请展示您在堆栈闪电战中尝试过的内容。使用 ng5-slider 它可能看起来像这样 stackblitz.com/edit/angular-lerpgo

标签： angular typescript angular-material

【解决方案1】：

请在您的 css 中更新此样式

    .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label, .mat-accent .mat-slider-track-fill {
    background-color: #fd7175;
    z-index: 1;
}

.mat-slider-horizontal .mat-slider-ticks-container {
    background-color: #986ed8;
}

.mat-slider-thumb {
    position: absolute;
    right: -5px;
    bottom: -10px;
    box-sizing: border-box;
    width: 7px;
    height: 20px;
    border: 3px solid transparent;
    border-radius: 0;
    transform: scale(.7);
    transition: transform .4s cubic-bezier(.25, .8, .25, 1), background-color .4s cubic-bezier(.25, .8, .25, 1), border-color .4s cubic-bezier(.25, .8, .25, 1);
}

.mat-accent .mat-slider-thumb-label-text {
    color: #ab42ab;
}

.mat-slider:not(.mat-slider-disabled).cdk-focused .mat-slider-thumb-label {
    border-radius: 50% 50% 0;
    background-color: transparent;
}

【讨论】：