range slider css 변경하기

range slider css 변경하기

 

 

 

input 태그의 type속성 중 range의 css를 변경해보았습니다.

 

 

 

 

먼저 html에서 가장 기본적인 형태를 만들었을 때는 이런 형태의 range slider가 만들어집니다.

 

<input type=”range”>

 

 

 

 

 

 html에서 기본적인 속성들은 조절 가능합니다. (최댓값, 최솟값, 기본값, 조절 값 등)

 

<input
  type="range"
  min="1" 
  max="10"
  value="5"
  step="1" 
/>
<!--최솟값 1, 최댓값 10, 기본값 5, 조절값 1-->

 

 

 

 

그 후 css에서 원하는 모양대로 만들어 줍니다.

 

/** slider **/
input[type=range] {
  -webkit-appearance: none;
  background-color: #e0e0e0;
  opacity: 0.8;
  border-radius: 7.5px;
  width: 30%;
  height: 15px;
  box-shadow: var(--box-shadow);
}
 
/** slider handle **/
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-radius: 7.5px;
  width: 15%;
  height: 15px;
  background-color: var(--gray-color);
  box-shadow: var(--box-shadow);
  cursor: pointer;
}