[JS] 간편한 range slider 라이브러리 rSlider.js

 

내가 만들고자 하는 range slide은

• 모바일에서 드래그하여 조절이 될 것
• 라벨을 클릭해도 작동할 것
• 현재 range 값 라벨에 강조가 될 것
• 카카오톡 알림톡으로 받아 열리기 때문에 카카오톡 브라우저에서 완벽하게 나올 것

이 모든 기능을 충족하는 소스를 찾는게 힘들어 개발자의 도움을 받아 직접 제작했보았는데 ios에서 작동하지 않았다.

input type=range의 css가 track, thum 등 바꿔줘야할 요소가 많고 그것도 브라우저마다 차별점이 있어 그런게 아닌가 추측됨.. 이걸로 꽤 애를 먹었는데 range는 간단한거 아니면 그냥 시도도 말아야겠다고 생각했다.

그래서 결국 codepen과 구글을 뒤지고 뒤져 찾아낸 js 라이브러리.

 

demo: https://slawomir-zaziablo.github.io/range-slider/

Range Slider

 

<link rel="stylesheet" href="css/rSlider.min.css">

위의 사이트에서 파일을 받아 head에 include 해준 후

<input type="text" id="sampleSlider" />

html 문서에는 요 한줄만 넣어주면 슬라이드가 생성되는걸 볼 수 있다.

디테일한 설정은 아래의 예시처럼 스크립트로 조절해 사용 가능.

<script src="js/rSlider.min.js"></script>
<script>
	var mySlider = new rSlider({
        target: '#sampleSlider',
        values: [2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015],
        range: true,
        tooltip: true,
        scale: true,
        labels: true,
        set: [2010, 2013]
    });
</script>

 

Configuration

target	Single element's class/id or HTML object e.g. document.getElementById('sampleSlider')
values	A flat array of values e.g. [1, 2, , 4, 5] or object e.g. {min: 1, max: 10}.
step	While using an object value {min: 0, max: 100} the step can be defined e.g. 10
range	Boolean (true or false) to set if the slider is range or single type (default false)
set	A flat array of one (single slider) or two (range slider) values to set initial values (optional)
width	Number or string value (e.g. 400 or '400px') to set the slider width (optional). Default the closest parent div width is used.
scale	Boolean (true or false) to show or hide scale (default true).
labels	Boolean (true or false) to show or hide scale labels (default true).
tooltip	Boolean (true or false) to show or hide tooltips (default true).
disabled	Boolean (true or false) to disable/enable slider (default false).