웹 페이지에 사용할 괜찮은, 쓸만한, 좋은, 이쁜 슬라이더(Slider)를 찾으시나요?? 

제가 다 찾아보지 않았지만, 찾던 도중 noUiSlider를 찾았고 찾는 것을 그만뒀습니다.


noUiSlider에 대한 기본 정보는 다음과 같습니다. 


홈페이지 주소 : http://refreshless.com/nouislider/

깃허브 주소 : https://github.com/leongersen/noUiSlider

라이선스 : WTFPL (http://www.wtfpl.net/about/)


라이선스는 간단히 말해서 맘대로 하렴 입니다. 


저는 웹 쪽 개발을 많이 해보지 않아서, JavaScript나 jQuery에 대해서 잘 모르는데요.

그런 제 수준에서도 사용하기 편한거 보면 정말 직관적으로 잘 개발한 것 같습니다.

또한 noUiSlider의 깃허브에 가보시면 무려 star가 1100 이상이구요 fork도 200개 이상이네요. (제 기준에서는 정말 대단한 수치입니다 ㅎㅎ)


홈페이지 주소로 가보시면 정말 쉽게 Slider를 만들 수 있습니다. 

저도 간단하게 하나 작성해보죠.


<script src="jquery.nouislider.all.min.js"></script>

<link rel="stylesheet" href="jquery.nouislider.min.css">


// html 

<div id="slider"></div>


<script>

// javascript

$('#slider').noUiSlider({

start: [ 20, 150 ],

margin: 50,

step: 10,

range: { 'min': [0], 'max': [255]}

});

</script>



값을 가져오는 것은 아래와 같이 하시면 됩니다. 


console.log($('#slider').val());

//$('#slider').val() <--- 요거 사용하시면 되겠죠? ^^


만약 색(color)을 입히고 싶으시면?? connect를 설정해주시면 됩니다. 


// javascript

$('#slider').noUiSlider({

start: [ 20, 150 ],

margin: 50,

step: 10,

        connect: true,

range: { 'min': [0], 'max': [255]}

});


+ Recent posts