Question Details

No question body available.

Tags

javascript html css slider

Answers (1)

Accepted Answer Available
Accepted Answer
April 6, 2026 Score: 2 Rep: 4,082 Quality: High Completeness: 60%

Assuming you are using the native , adding position:relative on .slider::-webkit-slider-runnable-track or ::-webkit-slider-thumb fixes the problem for me on Chrome.

.slider
{
    -webkit-appearance: none;
    height: 12px;
    --pc: 0;
    --color: white;
    --bgcolor: transparent;
    --border: #000000;
    background: linear-gradient(to right, transparent 0 var(--pc), var(--bgcolor) var(--pc) 100%), var(--color);
    background-origin: content-box;
    outline: solid;
    outline-color: var(--border);
    border-radius: 10px;
    overflow: visible;
}
.slider-fixed::-webkit-slider-runnable-track {
  position: relative;
}
.slider::-webkit-slider-thumb
{
    -webkit-appearance: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    outline: solid;
    outline-color: #000000;
    background: #CC1818;
}