Стилизация progress линии у input range
594
26 марта 2018, 23:12
Здравствуйте! Столкнулся с проблемой стилизации полосы прогресса у input range
Сейчас верстка выглядит вот так:
Требуется что бы до ползунка input range так же был покрашен в зеленый цвет, вот пример:
Как выглядит код:
// Less
@track-color: #424242;
@thumb-color: @color-green;
@thumb-radius: 3px;
@thumb-height: 30px;
@thumb-width: 30px;
@thumb-shadow-size: 1px;
@thumb-shadow-blur: 1px;
@thumb-shadow-color: #111;
@thumb-border-width: 1px;
@thumb-border-color: white;
@track-width: 100%;
@track-height: 18px;
@track-shadow-size: 2px;
@track-shadow-blur: 2px;
@track-shadow-color: #222;
@track-border-width: 1px;
@track-border-color: black;
@track-radius: 3px;
@contrast: 5%;
.shadow(@shadow-size,@shadow-blur,@shadow-color) {
box-shadow: @shadow-size @shadow-size @shadow-blur @shadow-color, 0px 0px @shadow-size lighten(@shadow-color,5%);
}
.track() {
width: @track-width;
height: @track-height;
cursor: pointer;
animate: 0.2s;
}
.thumb() {
.shadow(@thumb-shadow-size,@thumb-shadow-blur,@thumb-shadow-color);
border: @thumb-border-width solid @thumb-border-color;
height: @thumb-height;
width: @thumb-width;
border-radius: @thumb-radius;
background: @thumb-color;
cursor: pointer;
}
input[type=range] {
-webkit-appearance: none;
margin: @thumb-height/2 0;
width: @track-width;
background: transparent;
&:focus {
outline: none;
}
&::-webkit-slider-runnable-track {
.track();
.shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
background: @track-color;
border-radius: @track-radius;
}
&::-webkit-slider-thumb {
.thumb();
-webkit-appearance: none;
margin-top: ((-@track-border-width * 2 + @track-height) / 2) - (@thumb-height / 2);
}
&:focus::-webkit-slider-runnable-track {
background: lighten(@track-color, @contrast);
}
&::-moz-range-track {
.track();
.shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
background: @track-color;
border-radius: @track-radius;
}
&::-moz-range-thumb {
.thumb();
}
&::-ms-track {
.track();
background: transparent;
border-color: transparent;
border-width: @thumb-width 0;
color: transparent;
}
&::-ms-fill-lower {
background: darken(@track-color, @contrast);
border-radius: @track-radius*2;
.shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
}
&::-ms-fill-upper {
background: @track-color;
border-radius: @track-radius*2;
.shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
}
&::-ms-thumb {
.thumb();
}
&:focus::-ms-fill-lower {
background: @track-color;
}
&:focus::-ms-fill-upper {
background: lighten(@track-color, @contrast);
}
}<div class="calculate_left__ranges">
<label for="money">Сколько Вам необходимо?</label>
<input id="money" type="range" min="1000" max="45000" step="1000" value="3000">
<label for="days">На какой срок?</label>
<input id="days" type="range" min="3" max="30" step="1" value="10">
</div>СПАСИБО БОЛЬШОЕ!!!
Answer 1
Нашел ответ на Stack Overflow:
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" />Answer 2
Этот input достаточно сложно стилизовать на css но кое что можно ... работает почти всё кроме :focus ,
В любом случае что бы это выглядело как Вы хотите обычно подменяют любой input div и стилизуют как требуется ...есть масса jQuery plugin для этих целей ,к сожалению мастера javascript не охотно делятся ибо не хотят порождать себе конкуренцию , но за то через инспектор кода можно получить большинство селекторов для стилизации.
смотрите
input[type=range] {
-webkit-appearance: none;
width: 100%;
background-color: #ccc;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: ;
height: 20px;
width: 72px;
border-radius: 8px;
background:lightblue;
cursor: pointer;
margin-top: -6px;
box-shadow:;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 36px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 36px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow:;
background: lightgreen;
border-radius: 6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: lightgrey;
}
input[type=range]:focus::-slider-runnable-track {
background: lightgrey;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
background: #cccccc;
}
input[type=range]:focus::-moz-fill-upper {
background: #cccccc;
}
input[type=range]:focus::-fill-upper {
background: #cccccc;
}<input type="range">Answer 3
.box {
padding: 20px 40px;
background: #eee;
}
.box-line {
width: 350px;
height: 10px;
margin: 15px 0;
background: #aeaeae;
border-radius: 5px;
position: relative;
}
.box-line__progress {
position: absolute;
top: 0;
left: 0;
height: 10px;
border-radius: 5px;
width: 40%;
background: lime;
}
.box-line__progress:after {
content: '';
position: absolute;
top: -5px;
right: -10px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
z-index: 2;
}<div class="box">
<div class="box-line">
<div class="box-line__progress"></div>
</div>
</div>Answer 4
Решил вопрос с помощью github.com/IonDen/ion.rangeSlider
Помог soledar10
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47832 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30562 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23830 visits
- Как через css изменить цвет png изображения? 10384 visits
- Blob video url download 9997 visits
- Php curl запрос через прокси с авторизацией 9258 visits
- Работа с captcha vk api 8138 visits
© "hostciti.net" 09.3.2025 | 07:29