.range-slider {
display: block;
width: 100%;
height: 24px;
margin: 0;
background: transparent;
cursor: pointer;
appearance: none;
touch-action: pan-y;
}
.range-slider:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-full); }
.range-slider::-webkit-slider-runnable-track {
height: 6px;
border-radius: var(--radius-full);
background: var(--gradient-range-track);
}
.range-slider::-moz-range-track {
height: 6px;
border-radius: var(--radius-full);
background: var(--gradient-range-track);
}
.range-slider::-webkit-slider-thumb {
width: 18px;
height: 18px;
margin-top: -6px;
border: 3px solid var(--range-color, var(--range-start-color));
border-radius: 50%;
background: var(--color-surface-solid);
box-shadow: var(--shadow-sm);
appearance: none;
}
.range-slider::-moz-range-thumb {
box-sizing: border-box;
width: 18px;
height: 18px;
border: 3px solid var(--range-color, var(--range-start-color));
border-radius: 50%;
background: var(--color-surface-solid);
box-shadow: var(--shadow-sm);
}
.range-scale {
position: relative;
height: 1.5em;
margin-top: 1px;
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-variant-numeric: tabular-nums;
color: var(--color-text-muted);
}
.range-tick {
position: absolute;
top: 0;
left: calc(9px + (100% - 18px) * var(--at));
padding-top: 5px;
line-height: 1;
white-space: nowrap;
transform: translateX(-50%);
}
.range-tick::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 4px;
background: currentcolor;
opacity: 0.6;
}
.range-tick:last-child { transform: translateX(calc(-100% + 4px)); }
.range-tick:last-child::before { left: auto; right: 4px; }
.range-ends {
display: flex;
justify-content: space-between;
gap: var(--space-sm);
margin-top: 2px;
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
color: var(--color-text-muted);
}