나아가는 길에 발자국을 찍어보자

[타이핑 페이지 만들기_7] 미대생은 슬라이드바 모양과 색을 바꾸고 싶어해 본문

Projects/Font-page(미대생 졸전 도와주기)

[타이핑 페이지 만들기_7] 미대생은 슬라이드바 모양과 색을 바꾸고 싶어해

NAWIN 2020. 12. 10. 19:30
반응형

모바일에서 제이쿼리 ui가 제공해주는 슬라이드 바가 제대로 작동을하지도 않고, 미대생은 슬라이드바의 모양과 색도 바꾸고 싶어하였기에, 기존의 슬라이드바를 <input type=range> 를 사용하기로 했다.

 

 

알아보니 제이쿼리 모바일 버전은 모바일과 웹에서 모두 작동이 잘된다고 해서 적용해 봤는데,

다른 태그들 모양에게도 영향을 주어 페이지 전체의 모양이 바뀌어서 버렸다...

알아보니 <input>태그의 디자인 바꾸는 방법도 정보가 더 많아서

제이쿼리 ui를 사용하는 것보다 <input>을 사용해 슬라이드 바를 생성하고

제이쿼리로 실시간 값을 받아와 폰트 속성을 값을 설정하는 방향으로 바꾸기로 하였다.

 

 

 

  1. 슬라이드 바 생성

    <input class="slidebar" id="year" type="range" step="1" value="1930" min="1930" max="2020"/>
     <input class="slidebar" id="temp" type="range" step="1" value="0" min="0" max="1000"/>
  • type = range : 슬라이드 바 생성
  • step : 간격 1씩 증가
  • value : 초기값
  • min /max : 슬라이드 최소 / 최대 값

 

 

  1. 슬라이드 바 선 수정
input[type=range] { 
    -webkit-appearance: none; /*기본 스타일을 사용할지 말지 정하기 */
    width:80%;
    background: red; /*바 선색, transparent 로 설정하면 배경생이랑 동일해진다. == 투명 */ 
  }
  • 기본 색은 red, 화면이 생성될 때 정해지는 랜덤 색으로 다시 지정하기로 했다.
let sb =document.getElementsByClassName("slidebar")
for(elem of sb){
   elem.style.background='#'+letters[idx].font;
}
  • 다시 지정 -> 샵 #중요~!!

 

 

  1. 슬라이드 바 버튼
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none; /*기본 스타일을 사용할지 말지 정하기 */
    height: 20px;
    width: 20px;
    border-radius: 15px;
    outline: 0;
    border: 0;
}
  • 슬라이드 바 버튼 모양을 크기 정하고 모서리 곡선 설정.
  • 버튼 색도 화면 생성 시 정해지는 랜덤 색으로 다시 지정해야 한다.
 <style data="test" type="text/css"></style>
  • 슬라이드 버튼 색을 동적 지정 하기 위해 <body> 맨 윗 부분에 추가하여 선언.
let styleform =document.querySelector('[data="test"]');
styleform.innerHTML += "input[type=range]::-webkit-slider-thumb { background: #"+letters[idx].font + ";}";
  • style을 직접 지정하여 버튼 색을 바꾼다.

 

 

<원래 모양>

슬라이드바 변경 전

<바뀐 모양>

슬라이드바 변경 후

 

 

 

 

<참고 페이지>

https://zinee-world.tistory.com/386

 

[CSS] pure css - input range custom

See the Pen pure css - input range custom by Hyejin Oh (@mmt-zinee) on CodePen.

zinee-world.tistory.com

https://github.com/Dev-Jeromebaek/design_note/issues/1

 

🤹‍♀️ input 타입 range 스타일 커스텀하기 · Issue #1 · Dev-Jeromebaek/design_note

input 타입 range 스타일 수정하기_커스텀 스타일 요구조건 input type="range" 약간의 커스텀이 가능하다고만 알고있었는데 작업할 일이 없어서 만져본 일이 없다가 요구조건이 있어서 천천히 뜯어보

github.com

http://jemajin.blogspot.com/2017/10/css3-css3-input-range.html

 

[CSS3] CSS3를 이용해 input range

스타일링하기

HTML5 요소를 이용해, 손쉽게 range 을 조절할 수 있습니다. input element 의 type="range" 을 이용해서 말이죠. 물론, 최신 기술이다보니.. IE는 9버전 이상부터 지원합니다. 이 range 태그는 브라우저...

jemajin.blogspot.com

https://stackoverflow.com/questions/48297265/slider-webkit-slider-thumb-needed-in-javascript

 

.slider::-webkit-slider-thumb needed in javascript

I want to make a slider that changes the dot size when the value changes. So value 1 will be a size of 10px and value 100 will be size 100px. How am a able to change the .slider::-webkit-slider-th...

stackoverflow.com

 

반응형
저작자표시

'Projects > Font-page(미대생 졸전 도와주기)' 카테고리의 다른 글

[프로젝트 마무리] 미대생 졸전이 시작됐다.  (0) 2020.12.10
[타이핑 페이지 만들기 _6] 반응형 웹페이지를 만들자  (0) 2020.12.10
[3차 미팅] 코딩 친구의 훼방 2탄 : 화면크기를 왜 줄여 보는거야  (0) 2020.12.10
[3차 미팅] 코딩 친구의 훼방 2탄 : 화면크기를 왜 줄여 보는거야  (0) 2020.12.10
[타이핑 페이지 만들기_5] 코딩친구의 훼방 1탄 : 불다 하지마:(  (0) 2020.12.10
'Projects/Font-page(미대생 졸전 도와주기)' Related Articles more
Comments