티스토리 뷰

프로그래밍/Web

부트스트랩 슬라이더 만들기

루키~ 2015. 6. 10. 09:30

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

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


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

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



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

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

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

view plaincopy to clipboardprint?
  1. <!-- Bootstrap CSS -->  
  2. <link href="css/bootstrap.min.css" rel="stylesheet">  
  3. <!-- Bootstrap slider CSS -->  
  4. <link href="css/bootstrap-slider.css" rel="stylesheet">  
  5.   
  6. <!-- jQuery -->  
  7. <script type="text/javascript" src="js/jquery.min.js"></script>  
  8. <!-- Bootstrap slider JavaScript -->  
  9. <script type="text/javascript" src="js/bootstrap-slider.js"></script>  

boostratp_slider_css_js.zip


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

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

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

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

view plaincopy to clipboardprint?
  1. <!-- 슬라이더로 선택할 Input  -->  
  2. <input id="mini" type="text"   
  3.     data-slider-min="0" data-slider-max="20"   
  4.     data-slider-step="1" data-slider-value="14"/>  
  5.       
  6. <!-- 슬라이더 선택값을 보여줄 부분 -->  
  7. <span>현재 선택 값: <span id="miniVal">14</span></span>  


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

view plaincopy to clipboardprint?
  1. <script type="text/javascript">  
  2. $(function () {  
  3.     // 값을 선택할 수 있는 슬라이더 출력   
  4.     $('#mini').slider({  
  5.         formatter: function(value) {  
  6.             return '현재값: ' + value;  
  7.         }  
  8.     });  
  9.       
  10.     // 슬라이더에서 선택한 값을 출력하는 부분   
  11.     $("#mini").on("slide", function(slideEvt) {  
  12.         $("#miniVal").text(slideEvt.value);  
  13.     });  
  14. });  
  15. </script>  


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

view plaincopy to clipboardprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>BootStrap Slider</title>  
  6.   
  7. <!-- Bootstrap CSS -->  
  8. <link href="css/bootstrap.min.css" rel="stylesheet">  
  9. <!-- Bootstrap slider CSS -->  
  10. <link href="css/bootstrap-slider.css" rel="stylesheet">  
  11. </head>  
  12. <body>  
  13.   
  14. <div class="container">  
  15.     <h1 class="page-header">Bootstrap Slider </h1>  
  16.       
  17.     <div class="panel panel-default">  
  18.         <div class="panel-heading">슬라이더 입력</div>  
  19.         <div class="panel-body">  
  20.             <!-- 슬라이더로 선택할 Input  -->  
  21.             <input id="mini" type="text"   
  22.                 data-slider-min="0" data-slider-max="20"   
  23.                 data-slider-step="1" data-slider-value="14"/>  
  24.                   
  25.             <!-- 슬라이더 선택값을 보여줄 부분 -->  
  26.             <span>현재 선택 값: <span id="miniVal">14</span></span>    
  27.         </div>  
  28.     </div>  
  29. </div>  
  30.   
  31.   
  32. <!-- jQuery -->  
  33. <script type="text/javascript" src="js/jquery.min.js"></script>  
  34. <!-- Bootstrap slider JavaScript -->  
  35. <script type="text/javascript" src="js/bootstrap-slider.js"></script>  
  36.   
  37. <script type="text/javascript">  
  38. $(function () {  
  39.     // 값을 선택할 수 있는 슬라이더 출력   
  40.     $('#mini').slider({  
  41.         formatter: function(value) {  
  42.             return '현재값: ' + value;  
  43.         }  
  44.     });  
  45.       
  46.     // 슬라이더에서 선택한 값을 출력하는 부분   
  47.     $("#mini").on("slide", function(slideEvt) {  
  48.         $("#miniVal").text(slideEvt.value);  
  49.     });  
  50. });  
  51. </script>  
  52. </body>  
  53. </html>  


오픈 소스 및 예제들 

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

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



'프로그래밍 > Web' 카테고리의 다른 글

Sitemesh 활용시 하단의 자바스크립트 처리하기  (0) 2015.06.19
반응형 웹을 위한 부트스트랩 활용하기  (1) 2015.06.12
HighChart를 활용한 웹/모바일 호환 그래프 만들기~  (0) 2015.06.05
모바일 웹을 위한 브라우저 크기 및 기기 정보 체크하는 자바 스크립트  (0) 2015.06.03
PHP를 활용하여 DB 내용을 JSON으로 출력하기  (0) 2015.05.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함