21 lines
1.8 KiB
CSS
21 lines
1.8 KiB
CSS
:root{
|
|
--track-height:10px;
|
|
--track-color:#ddd;
|
|
--range-color:#4aa3ff;
|
|
--thumb-size:18px;
|
|
--thumb-color:#fff;
|
|
--thumb-border:#4aa3ff;
|
|
}
|
|
|
|
.slider-container{ width:100%; max-width:640px; margin:32px auto; }
|
|
.labels{ display:flex; justify-content:space-between; margin-bottom:12px; font-size:14px; }
|
|
.range-wrap{ position:relative; height:var(--thumb-size); user-select:none; touch-action:none; }
|
|
.track{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:var(--track-height); background:var(--track-color); border-radius:999px; }
|
|
.range-highlight{ position:absolute; top:50%; transform:translateY(-50%); height:var(--track-height); background:var(--range-color); border-radius:999px; }
|
|
|
|
input[type=range]{ -webkit-appearance:none; appearance:none; position:absolute; left:0; right:0; top:0; width:100%; height:100%; background:transparent; pointer-events:none; }
|
|
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; pointer-events:auto; width:var(--thumb-size); height:var(--thumb-size); border-radius:50%; background:var(--thumb-color); border:2px solid var(--thumb-border); box-shadow:0 1px 3px rgba(0,0,0,0.15); cursor:pointer; margin-top: calc((var(--track-height) - var(--thumb-size)) / 2); }
|
|
input[type=range]::-moz-range-thumb{ pointer-events:auto; width:var(--thumb-size); height:var(--thumb-size); border-radius:50%; background:var(--thumb-color); border:2px solid var(--thumb-border); box-shadow:0 1px 3px rgba(0,0,0,0.15); cursor:pointer; }
|
|
input[type=range]::-moz-range-track{ background:transparent; border:0; }
|
|
|
|
@media (max-width:520px){ .values{ flex-direction:column; align-items:flex-start; } .readable{ min-width:unset; width:100%; } } |