9

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

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;
<input type="range" value="0" min="0" max="100" step="1"/>

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

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

3
  • я так понимаю слева например красный, а справа фиолетовый ? без js никак, проще всего наверное градиент использовать.
    – zb'
    27 мая 2017 в 10:42
  • @zb' А, пофиг. Давайте с JS :) А так все правильно поняли.
    – Eugen Eray
    27 мая 2017 в 10:43
  • Посмотрите ответ, без js на css3 27 мая 2017 в 10:54

2 ответа 2

14

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

    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;
    }
<input type="range" value="0" min="0" max="100" step="1"/>

4
  • Во класс, спасибо. Но я чего-то не догоняю? Если есть ::-moz-range-progress, то где то же самое для ::-webkit- или -ms-?
    – Eugen Eray
    27 мая 2017 в 10:54
  • @EugenEray Пожалуйста, если мой ответ помог вам то можете вставить птичку возле ответа? 27 мая 2017 в 10:57
  • Да конечно без проблем.
    – Eugen Eray
    27 мая 2017 в 10:57
  • Точнее: можете пожалуйста показать вариант без overflow: hidden. Очень нужно. Спасибо :)
    – Eugen Eray
    27 мая 2017 в 12:59
8

Как я понял вам нужно без 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;
    }
<div class="range_container">
    <input type="range" />
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.