티스토리 뷰

웹과 모바일에서 입력창이 숫자일 때, 슬라이더 형태로 제공하는 방법을 정리해 보려고 한다. 

부트스트랩을 이용한 오픈소스가 있어서 활용해봤다. 


먼저 실행하는 결과를 살펴보려면 http://www.word.pe.kr/bootstrap/slider.html 에 접속하면 된다. 

다음과 같은 화면이 나온다. 



부트스트랩 슬라이더 소스 설명 

소스에서는 bootstrap CSS와 JQuery를 기본으로 사용하고 있고, 별도의 bootstrap-slider css와 js 파일이 존재한다. 

각각의 파일은 다음과 같다. 

boostratp_slider_css_js.zip


먼저 슬라이더로 입력할 부분과 결과를 출력할 부분의 HTML을 다음과 같이 구성한다. 

최소값(data-slider-min), 최대값(data-slider-max)을 지정할 수 있고, 

값의 이동 간격(data-slider-step)을 선택할 수 있다. 이동 간격은 정수가 아닌 0.5와 같은 실수도 가능하다. 

그리고 기본값(data-slider-value)을 지정하면 된다. 


그리고 jQuery를 이용한 자바스크립트에서 다음과 같이 슬라이더를 보여주고, 값이 바뀔 때마다 결과를 출력하도록 한다. 


전체 HTML 소스를 살펴보면 다음과 같다. 


오픈 소스 및 예제들 

사용한 오픈 소스는 bootstrap-slider라는 이름으로 https://github.com/seiyria/bootstrap-slider 에서 제공하고 있다. 

더 많은 예제를 살펴보려면 http://seiyria.github.io/bootstrap-slider/ 를 참고하면 된다. 



댓글
댓글쓰기 폼