input type="range"의 다양한 CSS 샘플

input type="range", 존재는 알고 있는데 좀처럼 사용하지 않는 태그의 하나일까라고 생각합니다.
요 전날 처음 사용했을 때보다 CSS 샘플이 구르지 않았기 때문에
최근 젊은이가 자주 사용하고 있는 가공 앱풍의 CSS를 써 보려고 합니다.

이번은 스마트 폰용이므로, PC에서의 표시는 고려하고 있지 않습니다.
또한 Android의 앱을 참고로하고 있기 때문에 iPhone 버전이라고 다른 경우가 있습니다.

HTML(공통)

<input type="range" class="input-range" value="100" min="0" max="200" data-unit="%">

기본값은 이런 모양입니다.

Instagram 바람

.input-range[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #c7c7c7;
  height: 2px;
  width: 100%;

  &:focus,
  &:active {
    outline: none;
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    border: none;
    width: 12px;
    height: 12px;
    display: block;
    background-color: #262626;
    border-radius: 50%;
    -webkit-border-radius: 50%;
  }
}

트위터 스타일

Twitter의 공식 앱으로 사진을 올렸을 때 필터 편집할 때 나오는 슬라이더입니다.



노브를 움직일 때 (활성)

.input-range[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  height: 5px;
  width: 100%;
  border-radius: 6px;

  &:focus,
  &:active {
    outline: none;
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    border: 2px solid rgba(0, 0, 0, .7);
    width: 22px;
    height: 22px;
    display: block;
    background-color: #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
  }

  &:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .6);
    transition: .4s;
  }
}

LINE camera풍

LINE 컬러의 녹색이 빛나네요.

.input-range[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #eaeaea;
  height: 2px;
  width: 100%;
  border-radius: 6px;

  &:focus,
  &:active {
    outline: none;
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    width: 22px;
    height: 22px;
    display: block;
    background-color: #07be19;
    border-radius: 50%;
    -webkit-border-radius: 50%;
  }
}

snow 바람

실은 스탬프 이외에도 필터도있는 snow

.input-range[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(255, 255, 255, .7);
  height: 2px;
  width: 100%;
  border-radius: 6px;

  &:focus,
  &:active {
    outline: none;
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    width: 20px;
    height: 20px;
    display: block;
    border: 1px solid #717171;
    background-color: #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
  }
}

BeautyPlus 바람

핑크가 귀엽다

.input-range[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffdae7;
  height: 2px;
  width: 100%;
  border-radius: 6px;

  &:focus,
  &:active {
    outline: none;
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    width: 20px;
    height: 20px;
    display: block;
    border: 2px solid #fb5986;
    background-color: #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
  }
}

이상입니다

이렇게 보면 어느 앱도 크기나 바의 굵기가 거의 같았습니다.
이번은 CSS로 디폴트의 변경이었으므로, 움직여 바에 색을 붙이는 곳까지는 가고 있지 않습니다만,
이쪽의 멋진 샘플을 참고로 하면 실장할 수 있는 것 같습니다.

참고 : 【HTML5】input[type="range"]를 CSS와 JS로 커스터마이즈