antd-mobile
Version:
<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*hjjDS5Yy-ooAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
112 lines (97 loc) • 1.9 kB
CSS
.adm-slider {
--fill-color: var(--adm-color-primary);
padding: 8px 24px;
list-style: none;
user-select: none;
}
.adm-slider-track-container {
padding: 16px 0;
}
.adm-slider-track {
position: relative;
width: 100%;
height: 8px;
background-color: #f5f5f5;
}
.adm-slider-fill {
position: absolute;
z-index: 1;
height: 8px;
background-color: var(--fill-color);
}
.adm-slider-ticks {
position: absolute;
width: 100%;
height: 8px;
background: transparent;
}
.adm-slider-tick {
position: absolute;
top: 50%;
width: 22px;
height: 22px;
margin-left: -10px;
background-color: #f5f5f5;
border-radius: 50%;
transform: translate(0, -50%);
}
.adm-slider-tick-active {
background-color: var(--fill-color);
}
.adm-slider-thumb {
width: 44px;
height: 44px;
margin: 10px;
border-radius: 50%;
background: var(--adm-color-white);
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 3px 6px -4px rgba(0, 0, 0, 0.25);
}
.adm-slider-thumb:focus {
outline: none;
}
.adm-slider-thumb-icon {
width: 20px;
height: 20px;
margin: 12px;
user-select: none;
}
.adm-slider-thumb-container {
cursor: grab;
touch-action: none;
position: absolute;
z-index: 2;
width: 64px;
height: 64px;
border-radius: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.adm-slider-mark {
position: relative;
width: 100%;
overflow: visible;
font-size: 24px;
height: 24px;
margin-top: 8px;
}
.adm-slider-mark-text {
position: absolute;
display: inline-block;
line-height: 32px;
color: #999;
text-align: center;
word-break: keep-all;
user-select: none;
transform: translateX(-50%);
}
.adm-slider-disabled {
opacity: 0.4;
}
.adm-slider-disabled .adm-slider-thumb {
cursor: not-allowed;
}
.adm-slider-disabled .adm-slider-mark-text,
.adm-slider-disabled .adm-slider-tick {
cursor: not-allowed;
box-shadow: none;
}