input range 요소에 대한 유용한 자료들 모음.

 

1. 구글검색결과

https://www.google.com/search?q=input+range+styling&tbm=isch&ved=2ahUKEwiT2PaPsZf6AhVOx5QKHZDcAl4Q2-cCegQIABAA&oq=input+range+styling&gs_lcp=CgNpbWcQAzIGCAAQHhAIMgQIABAYMgQIABAYUABYAGD_A2gAcAB4AIABkgGIAZIBkgEDMC4xmAEAqgELZ3dzLXdpei1pbWfAAQE&sclient=img&ei=EWkjY9OLOM6O0wSQuYvwBQ&bih=1176&biw=1024&rlz=1C5CHFA_enKR938KR938 

 

2. w3c 의  브라우저간 표준화에 대한 issue

https://github.com/w3c/csswg-drafts/issues/4410

 

3. css-tricks 의 브라우저간 디자인 일치시키는 방법

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

 

4. 유용한 디자인 예제

https://codepen.io/vsync/pen/mdEJMLv 

https://github.com/yairEO/ui-range

https://codepen.io/thebabydino/pen/JovQwE

 

5. Vertical slider 구현 

https://codepen.io/kunukn/pen/pgqvpQ (no transform)

https://codepen.io/jasesmith/pen/rZmKQG

https://codepen.io/mattwillcreative/pen/ExxMxQK