&>input[type='range']{ width: stretch; margin: 0; padding: 0; border-style: none; outline-style: none; appearance: none; background-color: transparent; /*background-color: black;*/ height: 100%; accent-color: red; &::-webkit-slider-runnable-track { appearance: none; /*background-color: #319fc5;*/ /*height: 0.5rem;*/ height: stretch; margin: 0; padding: 0; border-style: none; outline-style: none; } &::-webkit-slider-thumb { appearance: none; /*margin-top: -12px;*/ background-color: #5cd5eb; box-shadow: -80px 0 0 0 #43e5f7; /*height: 2rem;*/ /*width: 1rem; */ /*display: none;*/ height: inherit; /*height: stretch;*/ border-style: none; border-radius: 0; width: 0; } } &>progress { display: block; width: stretch; height: 100%; border-style: none; &::-webkit-progress-bar { background-color: #111; } &::-webkit-progress-value { background-color: #319fc5/*#0f789f*/; } } input[type="range"] { accent-color: #007bff; /* Sets the color of the slider thumb and track progress */ } input[type="range"] { /* Reset default appearance */ appearance: none; width: 100%; /* Adjust width as needed */ height: 10px; /* Track height */ background: #d3d3d3; /* Default track color */ outline: none; /* Remove outline on focus */ cursor: pointer; } /* Styling the track (the bar the thumb slides on) */ input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, red, yellow, green, blue, violet); /* Example gradient */ height: 8px; border-radius: 4px; } /* Styling the thumb (the draggable handle) */ input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; background: #fff; /* Thumb color */ border: 1px solid #ccc; border-radius: 50%; /* Makes it circular */ margin-top: -6px; /* Adjust to center vertically on the track */ }