Стилизовать input type=range перед ползунком

#html #css #input

Здравствуйте! Есть такие стили для слайдера:



input[type=range] {-webkit-appearance: none; margin: 5.8px 0; background-color: transparent
!important;}

input[type=range]:focus {outline: none;}

input[type=range]::-webkit-slider-runnable-track {cursor: pointer; box-shadow: 2.4px
2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background:
#ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}

input[type=range]::-webkit-slider-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16,
14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77);
border-radius: 28px; background: #ffff29; cursor: pointer; -webkit-appearance: none;
margin-top: -7.8px;}

input[type=range]:focus::-webkit-slider-runnable-track {background: #b16cff;}

input[type=range]::-moz-range-track {width: 100%; cursor: pointer; box-shadow: 2.4px
2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background:
#ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}

input[type=range]::-moz-range-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14,
0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77);
border-radius: 28px; background: #ffff29; cursor: pointer;}

input[type=range]::-ms-track {width: 100%; cursor: pointer; background: transparent;
border-color: transparent; color: transparent;}

input[type=range]::-ms-fill-lower {background: #a758ff; border: 1px solid rgba(163,
0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163,
0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}

input[type=range]::-ms-fill-upper {background: #ac62ff; border: 1px solid rgba(163,
0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163,
0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}

input[type=range]::-ms-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78),
0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius:
28px; background: #ffff29; cursor: pointer;}

input[type=range]:focus::-ms-fill-lower {background: #ac62ff;}

input[type=range]:focus::-ms-fill-upper {background: #b16cff;}

/* Track */
input[type=range]::-webkit-slider-runnable-track {height: 6.4px;}
input[type=range]::-moz-range-track {height: 6.4px;}
input[type=range]::-ms-track {height: 6.4px;}

/* Thumb */
input[type=range]::-webkit-slider-thumb {height: 20px; width: 8px;}
input[type=range]::-moz-range-thumb {height: 20px; width: 8px;}
input[type=range]::-ms-thumb {height: 20px; width: 8px;





Моя задача – поменять цвет слайдера перед тумблером. Как это сделать?

Если не понятно, то могу привести пример.
    

Ответы

Ответ 1

Вот пример стилей где цвета до и после ползунка различаются:



    input[type='range'] {
        overflow: hidden;
        width: 80px;
        -webkit-appearance: none;
        background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
        height: 10px;
        -webkit-appearance: none;
        color: #13bba4;
        margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        cursor: ew-resize;
        background: #434343;
        box-shadow: -80px 0 0 80px #43e5f7;
    }
    
    input[type="range"]::-moz-range-progress {
        background-color: #43e5f7; 
    }
    input[type="range"]::-moz-range-track {  
        background-color: #9a905d;
    }
    input[type="range"]::-ms-fill-lower {
        background-color: #43e5f7; 
    }
    input[type="range"]::-ms-fill-upper {  
        background-color: #9a905d;
    }



Ответ 2

Как я понял вам нужно без overflow: hidden; на input.
Вот рабий пример и для этого:



    .range_container{
        position: relative;
        width: 80px; /*input range width*/
        height: 10px; /*input range height*/
        overflow: hidden;
    }
    
    input[type='range'] {
        position: absolute;
        width: 80px;
        height: 9px;
        -webkit-appearance: none;
        background-color: #9a905d;
        top: -2px;
        left: -2px;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
        height: 10px;
        -webkit-appearance: none;
        color: #13bba4;
        margin-top: 1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        cursor: ew-resize;
        background: #434343;
        box-shadow: -80px 0 0 80px #43e5f7;
    }
    
    input[type="range"]::-moz-range-progress {
        background-color: #43e5f7; 
    }
    input[type="range"]::-moz-range-track {  
        background-color: #9a905d;
    }
    input[type="range"]::-ms-fill-lower {
        background-color: #43e5f7; 
    }
    input[type="range"]::-ms-fill-upper {  
        background-color: #9a905d;
    }