Стилизация progress линии у input range

567
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

READ ALSO
CSS. прописывание элемента внутри класса
CSS

CSS. прописывание элемента внутри класса

Видел в одном видеоуроке, как парень прописывает код класса внутри другого класса

 172
Обратится к элементу по id в блоке кода CSS
CSS

Обратится к элементу по id в блоке кода CSS

Подскажите пожалуйста, могу ли я обратится к элементу по id в блоке кода ? Вот пример того что я хочу: https://prntsc/iwfm2s

 168
Как подключиться к удаленной БД mysql?
MySQL

Как подключиться к удаленной БД mysql?

Извиняюсь если вопрос или данные некорректныВ этом вопросе я полный нуб

 175
Оптимизация запрос mysql
MySQL

Оптимизация запрос mysql

Как оптимизировать запросы? Где почитать о различных хаках и тестах? Есть для реляционных бд что то типо wwwphpbench

 194