HTML5 - Range

HTML5 Input Range

Range

Angular module중에서 color-picker를 사용하게 되었는데… 여기에서는 opacity조절을 밖에서 할 수 없다.(ranger slider)
html5 input 태그에서 range가 있다.
나는 input range를 이용하여 color-picker div 영역에 겹쳐 만들었다.

range type

<!-- base -->
<input type="range" min="0" max="100" step="1" value="52" />

<!-- decimal -->
<input type="range" min="0" max="1" step="0.01" value="0.45" />

Custom range slider

input[type=range] {
  -webkit-appearance: none; /* 원래의 webkit(opera, chrome, safari) 스타일 제거 */
  -moz-appearance: none;    /* 원래의 moz(firefox) 스타일 제거 */
  -ms-appearnace: none; /* 원래의 ms(explorer, edge) 스타일 제거 */
  width: 100%;
  border-radius: 8px;
  height: 7px;
  border: 1px solid #bdc3c7;
  background-color: #fff;
}

/* webkit */
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #ecf0f1;
  border: 1px solid #bdc3c7;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  cursor: pointer;
}

/* moz */
input[type=range]::-moz-range-track {
  border-radius: 8px;
  height: 7px;
  border: 1px solid #bdc3c7;
  background-color: #fff;
}
input[type=range]::-moz-range-thumb {
  background: #ecf0f1;
  border: 1px solid #bdc3c7;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  cursor: pointer;
}

/* IE, edge */
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}
input[type="range"]::-ms-track {
    border-radius: 8px;
  height: 7px;
  border: 1px solid #bdc3c7;
  background-color: #fff;
}
input[type="range"]::-ms-thumb {
  background-color: #ecf0f1;
  border: 1px solid #bdc3c7;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  cursor: pointer;
}

Firefox problem

input에 focus되면 도트무늬로 border가 생긴다. 이 문제는 아래 css를 추가해주면 된다.

input[type=range]::-moz-focus-outer {
  border: 0;
}