antd-mobile
Version:
<div align="center">
134 lines (118 loc) • 2.51 kB
CSS
.adm-slider {
--fill-color: var(--adm-color-primary);
padding: 10px 28px;
list-style: none;
-webkit-user-select: none;
user-select: none;
}
.adm-slider-track-container {
padding: 16px 0;
}
.adm-slider-track {
position: relative;
width: 100%;
height: 6px;
background-color: var(--adm-color-fill-content);
border-radius: 6px;
}
.adm-slider-fill {
position: absolute;
z-index: 1;
height: 6px;
border-radius: 6px;
background-color: var(--fill-color);
}
.adm-slider-ticks {
position: absolute;
width: 100%;
height: 6px;
background: transparent;
}
.adm-slider-tick {
position: absolute;
top: -4px;
width: 14px;
height: 14px;
margin-left: -6px;
background-color: var(--adm-color-fill-content);
border-radius: 50%;
}
.adm-slider-tick-active {
background-color: var(--fill-color);
}
.adm-slider-thumb {
width: 56px;
height: 56px;
margin: 4px;
border-radius: 50%;
text-align: center;
line-height: 56px;
background: var(--adm-color-text-light-solid);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
color: var(--fill-color);
}
.adm-slider-thumb:focus {
outline: none;
}
.adm-slider-thumb-icon {
width: 24px;
height: 24px;
margin: 16px;
-webkit-user-select: none;
user-select: none;
}
.adm-slider-thumb-container {
cursor: -webkit-grab;
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: var(--adm-font-size-3);
height: 22px;
margin-top: 20px;
}
.adm-slider-mark-text {
position: absolute;
display: inline-block;
line-height: 1;
color: var(--adm-color-text);
text-align: center;
word-break: keep-all;
-webkit-user-select: none;
user-select: none;
transform: translateX(-50%);
}
.adm-slider-disabled .adm-slider-mark,
.adm-slider-disabled .adm-slider-thumb-icon {
opacity: 0.4;
}
.adm-slider-disabled .adm-slider-tick-active::after,
.adm-slider-disabled .adm-slider-fill::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: inherit;
background-color: rgba(255, 255, 255, 0.6);
}
.adm-slider-disabled .adm-slider-thumb {
cursor: not-allowed;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
}
.adm-slider-disabled .adm-slider-mark-text,
.adm-slider-disabled .adm-slider-tick {
cursor: not-allowed;
box-shadow: none;
}