src/scss/slider.scss
.mdc-Slider {
display: flex;
align-items: center;
}
.mdc-Slider-input {
position: absolute;
opacity: 0;
z-index: -1;
}
.mdc-Slider-label {
margin-left: 20px;
}
.mdc-Slider-track {
padding: 23px 0;
margin: 0 -8px;
position: relative;
flex: 1;
user-select: none;
}
.mdc-Slider-track-off {
margin: 0 8px;
height: 2px;
background: rgba(0, 0, 0, 0.26);
}
.mdc-Slider-track-on {
pointer-events: none;
height: 2px;
background: $blue-dark;
}
.mdc-Slider-thumb {
pointer-events: none;
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: $blue-dark;
top: 16px;
border: 2px solid transparent;
}
.mdc-Slider-thumb.is-mouseDown {
transition: left 0.5s;
}
.mdc-Slider-thumb.is-zero {
transition: border 0.5s, background 0.5s;
background: #fff;
border-color: rgba(0, 0, 0, 0.26);
}
@keyframes click-jump {
0% {
transform: scale(1);
}
50% {
transform: scale(1.75);
}
100% {
transform: scale(1.25);
}
}