HTML5 range slider UI
멋진 슬라이더를 만드는 쉬운 방법. rangeslider.js UI를 사용해보십시오. 다음과 같은 기능이 있습니다.
– 터치 스크린 친화적
– 작고 빠름, IE8 +를 포함한 모든 주요 브라우저 지원
– 반응형
jQuery 와 rangeslider.min.js를 프로젝트에 포함하십시오 . 속성은 간단합니다.
HTML
<input
type="range"
min="10" // default 0
max="1000" // default 100
step="10" // default 1
value="300" // default min + (max-min)/2
data-orientation="vertical" // default horizontal
>
JS
// Initialize a new plugin instance for all
// e.g. $('input[type="range"]') elements.
$('input[type="range"]').rangeslider();
// Destroy all plugin instances created from the
// e.g. $('input[type="range"]') elements.
$('input[type="range"]').rangeslider('destroy');
// Update all rangeslider instances for all
// e.g. $('input[type="range"]') elements.
// Usefull if you changed some attributes e.g. `min` or `max` etc.
$('input[type="range"]').rangeslider('update', true);
API
rangeslider.js API는 표준 HTML 입력 방법과 호환됩니다.
$('input[type="range"]').val(10).change();
OPTIONS
$('input[type="range"]').rangeslider({
// Feature detection the default is `true`.
// Set this to `false` if you want to use
// the polyfill also in Browsers which support
// the native <input type="range"> element.
polyfill: true,
// Default CSS classes
rangeClass: 'rangeslider',
disabledClass: 'rangeslider--disabled',
horizontalClass: 'rangeslider--horizontal',
verticalClass: 'rangeslider--vertical',
fillClass: 'rangeslider__fill',
handleClass: 'rangeslider__handle',
// Callback function
onInit: function() {},
// Callback function
onSlide: function(position, value) {},
// Callback function
onSlideEnd: function(position, value) {}
전체소스
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
<script src="rangeslider.min.js" type="text/javascript" ></script>
<link href="rangeslider.css" rel="stylesheet" />
<style>
#sliderContiner {
color: #ddd;
padding: 50px;
max-width: 200px;
margin: 0 auto;
text-align: center;
}
#sliderContiner .rangeslider__fill {
background-color: #ff9800;
}
</style>
</head>
<body>
<div id='sliderContiner'>
<input
type="range"
min="0"
max="100"
step="1"
value="50"
data-orientation="horizontal"
>
<span id="sliderValue"></span>
</div>
<script>
$(function() {
var $sliderValue = $("#sliderValue");
$('input[type="range"]').rangeslider({
polyfill: false
,onSlide: function(position, value) {
$sliderValue.text(value);
},onSlideEnd: function(position, value) {
$sliderValue.text(value);
}
});
});
</script>
</body>
</html>
데모 및 문서:
GitHub:
https://github.com/andreruffert/rangeslider.js
License: MIT
출처 : http://javascript-html5-tutorial.net/2018/04/21/html5-range-slider-input-rangeslider-js.html
'프론트엔드 개발 놀이터 > Javascript' 카테고리의 다른 글
| javascript 아날로그시계 소스 - 분석1 (0) | 2020.07.07 |
|---|---|
| javascript 아날로그시계 소스 - 개요 (0) | 2020.07.07 |
| 크롬 개발시 크로스 도메인 처리 (0) | 2020.04.14 |
| 2020년 5가지 무료 jQuery 인쇄 플러그인 (0) | 2020.04.14 |
| [GAME] HTML5 Tower Defense (0) | 2020.03.13 |