[디알코] 슬라이더 스스로 만들어보기.. 후덜덜..

[디자이너가 알려주는 코딩, 디알코]

슬라이더가 있는 디자인을 했다...

대충 이렇게 생긴...

내가 한거라 욕할 수도 없고... 슬라이더가 필요해서.. 어쩔 수가 없었다..

우리 회사엔 따로 프론트 개발자가 없다..

웬만한건 내가 만들어야 된다... 

백앤드 개발자분이 계시지만 백단은 할게 많기 때문에 이런 자질구레(?)한건 내가 해야 한다 ㅋㅋㅋ

물론 그분이 css를 잘 못 다루시는 것도 있긴 하지만..

여튼, 쉽게 해결하고 싶어서 부트스트랩에 슬라이더가 있는지 봤더니 없더라. 흠

굳이 부트스트랩으로 안해도 되는 것인가 하여

html slider 라고 검색해보니

이렇게 떡하니 첫 번째에 친절하게 좋아보이는게 있었다.

떠블유쓰리스쿨즈  여긴 html 이랑 css 찾아보려고 자주 들르는 사이트여서 믿음이 갔다.

일단 샘플을 보니 슬라이더 바가 있고, 

조절하는 컨트롤러? 가 있고

하단에 현재 값이 나오는게 있어서

딱 내가 하려는데 필요한건 다 있는거 같았다.

html, css, javascript 를 다 써서 해야 되네..

어쨌든 도저언~!

example 에 있는 코드를 그대로

html 넣고  css 넣고 javascript 넣었다.

업로드하고 새로 고침!!

그랬더니

오오  뭔가 되게 못생긴게 나왔다.

근데 현재 값을 나타내는 숫자가 없었다.

예제에 나온 value : 49 저 부분을 개발자도구로 열어보고

<span id="f" style="font-weight:bold;color:red">49</span>

라고 써있는 부분을 input 태그 아래에 넣었다.

그리고 span 에 있는 아이디값 f 가 value 랑 연결이 되는 것 같아서

스크립트도 열어보니

var slideCol = document.getElementById("id1");

var slideSq = document.getElementById("id2");

var slidePic = document.getElementById("id3");

var y = document.getElementById("f");

y.innerHTML = slideCol.value;

slideCol.oninput = function() {

    y.innerHTML = this.value;

}

slideSq.oninput = function() {

    y.innerHTML = this.value;

}

slidePic.oninput = function() {

    y.innerHTML = this.value;

}

이렇게 있었다...

아.. 머리 아프고.. 긴장이 되고.. 뇌에 부담이 되기 시작한다...

벌써부터 포기하고 싶다... ㅜㅜ

슥 보니  id1, id2, id3 이렇게 나와있다..

세 가지 형태의 슬라이더 예시를 보여준거구나 싶어서

하나만 남기고 삭제를 해본다.

var slideCol = document.getElementById("id1");

var y = document.getElementById("f");

y.innerHTML = slideCol.value;

slideCol.oninput = function() {

    y.innerHTML = this.value;

}

하아! 한결 가벼워!!

저 코드를 보니,

id 값으로 id1 이 써져있는 태그를 가져와서 slideCol 이라고 이름을 붙이고

id가 f 로 돼있는 태그를 가져와서 y 라고 이름을 붙인다..

y.innerHTML = slideCol.value

여긴 잘 모르겠다.  슬라이더의 벨류를 y의 innerHTML 이라는 함수? 매소드? 에 넣는거 같은데

뭐 원리는 잘 몰라도

어쨌든 난 벨류값을 보여주면 된다 ㅋㅋ

그 아래에 oninput 도 모르겠다 ㅋㅋㅋ

어쨌든 얘도 슬라이더를 움직인 value 값을 가져오는거 같다 ㅋㅋ

코딩은 눈치로 하는거지!! ㅋㅋㅋ

<div class="slidecontainer">

<input type="range" min="20000" max="200000" value="110000" class="slider" id="myRange">

<span id="f" style="font-weight:bold;color:red">110000</span>

</div>

<script>

var gapSlider = document.getElementById("myRange");

var y = document.getElementById("f");

y.innerHTML = gapSlider.value;

gapSlider.oninput = function() {

y.innerHTML = this.value;

}

</script>

그래서 요러케  id 맞춰주고 내꺼 슬라이더에 맞는 최소 최대값 적고 벨류값 맞춰주고

변수 이름도 gapSlider 도 바꿔주고

밑에도 왠지 이거로 맞춰줘야 할거 같아서

맞춰서 수정했다.

그랬더니

이렇게!!! 값도 보이고 조절하면 값도 바뀌고!!

와씨  개뿌듯

이제 저 못생긴 녀석을 이쁘게 다듬어야지

이 글은 내가 코딩을 다 하고  쓰는 글이 아니라

지금 실시간으로 만들면서 기록을 하고 있다.

왜냐면, 이렇게 적으면서 정리라도 하면서 해야지

안그러면 머릿속이 너무 뻑뻑해져서  자리를 박차고 도망가버리고 싶어진다...

일단 슬라이더 짝데기를 바꾸고~

컨트롤러도 동그랗게 하고~ 색도 바꾸고~

음. 보더가 들어가있네

보더 없애고

이제 좀 그나마 나아졌네

이제 저 빨간색 벨류 위치를 바꿔야겠다.

음  바꾸긴 했는데..

슬라이더가 잘 안움직이네 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

동그라미가 작아서 그런가 ㅋㅋㅋㅋㅋㅋㅋ

흑흑... 그래도 잘 안돼네 ㅠㅠㅠㅠㅠ

슬라이더 height 가 너무 얇아서 그런가....

두께를 키워도 잘 안되자나!! 

사기 당한 기분이야...

아 왜 안움직여.....

하아... script 위치를 헤더에 넣어봤따가, 맨 밑으로 옮겨봤다가

이거저거 다 해봤는데 계속 그러네...

input range not moving 으로 검색해봤으나

딱히 안움직이는거에 대한 결과가 없다 ㅜㅜ

뭔가 클래스 이름이 겹쳤거나.. 뭔가가 잘못 된거 같은데...

일단 계속 이거 붙잡고 있을 순 없으니 오늘은 이만 ㅜㅜㅜㅜ