슬라이더
슬라이더 (Slider)
트랙에서 값을 드래그해 선택하거나 범위를 지정할 수 있는 컴포넌트예요. 숫자·문자 라벨, 눈금, 툴팁, 범위 선택 등을 지원해요.
출처: 문서
본문
유형 (Types)
슬라이더 (Slider)
표준 슬라이더예요.
$('.ui.slider')
.slider()
;
라벨 있는 슬라이더 (Labeled slider)
라벨을 보여 주는 슬라이더예요.
라벨과 눈금 있는 슬라이더 (Labeled ticked slider)
라벨과 눈금을 보여 주는 슬라이더예요.
아래쪽 정렬 라벨 (Bottom aligned labeled)
슬라이더는 트랙 아래에 라벨을 표시할 수 있어요.
제한된 라벨 (Restricted Labels)
원하는 라벨만 표시되도록 제한할 수 있어요.
$('.ui.slider')
.slider({
restrictedLabels: [0, 10, 15, 35, 80, 90, 100],
min: 0,
max: 100,
step: 0,
autoAdjustLabels: false
})
;
문자 (Letters)
숫자 값 대신 문자를 표시할 수 있어요.
$('#lettersexample').slider({
labelType: 'letter',
max: 15
});
다른 알파벳 문자 집합을 제공할 수도 있어요.
$('#greekletters').slider({
labelType: 'letter',
letters: 'αβγδεζηθικλμνξοπρςτυφχψω',
max: 15
});
문자열(또는 배열)의 끝에 도달하면 두 값이 겹치지 않도록 문자가 스스로 반복돼요. 스프레드시트의 열과 비슷해요.
$('#repeatingletters').slider({
labelType: 'letter',
letters: 'ABC',
max: 15
});
문자 단어 (Letter Words)
letters 옵션에 문자열 배열을 제공하면 각 라벨 값에 텍스트를 미리 정의할 수 있어요.
$('#letterwords').slider({
labelType: 'letter',
letters: ['Beginner', 'Advanced', 'Pro', 'Genius'],
max: 3
});
사용자 정의 해석 라벨 (Custom interpreted labels)
라벨 값에 따라 사용자 정의 라벨을 반환하는 함수를 제공할 수 있어요.
$('#interpretedlabel')
.slider({
interpretLabel: function(value) {
// convert to hex values
return ('0000' + value.toString(16)).slice(-2).toUpperCase();
}
})
;
범위 슬라이더 (Range slider)
두 값 사이의 범위를 선택할 수 있게 해 주는 범위 슬라이더예요.
$('.ui.range.slider')
.slider({
min: 5,
max: 100,
start: 10,
end: 90,
step: 5
})
;
범위 슬라이더의 두 엄지 사이 거리를 제한할 수 있어요.
$('.ui.range.slider')
.slider({
min: 5,
max: 100,
start: 10,
end: 50,
minRange: 10,
maxRange: 40,
step: 0
})
;
변형 (Variations)
비활성화 (Disabled)
슬라이더를 비활성화된 상태로 보이게 할 수 있어요.
반전 (Inverted)
슬라이더를 반전할 수 있어요.
역방향 (Reversed)
슬라이더를 역방향으로 바꿀 수 있어요.
엄지 툴팁 (Thumb Tooltips)
슬라이더 엄지를 호버하면 현재 값을 담은 툴팁을 표시할 수 있어요.
$('.ui.slider')
.slider({
showThumbTooltip: true
})
;
툴팁은 항상 보이게 유지할 수도 있고 tooltipConfig 설정으로 사용자 정의할 수도 있어요. 가능한 값은 Tooltip Variations를 참고하세요.
$('.ui.slider')
.slider({
showThumbTooltip: true,
tooltipConfig: {
position: 'bottom center',
variation: 'small visible green'
}
})
;
세로 (Vertical)
슬라이더를 세로로 만들 수 있어요.
세로 오른쪽 정렬 (Vertical right aligned)
세로 슬라이더는 눈금과 라벨을 오른쪽으로 정렬할 수 있어요.
색상 (Colored)
슬라이더를 여러 색으로 만들 수 있어요.
반전 색상 (Inverted Colored)
반전 상태에서도 슬라이더를 여러 색으로 만들 수 있어요.
크기 (Size)
슬라이더를 여러 크기로 만들 수 있어요.
예시 (Examples)
단계 (Step)
슬라이더는 사용자 정의 step을 가질 수 있어요...
$('.ui.slider')
.slider({
min: 0,
max: 10,
start: 4,
step: 2
})
;
...또는 step이 전혀 없을 수도 있어요.
$('.ui.slider')
.slider({
min: 0,
max: 10,
start: 3.82,
step: 0
})
;
부드러운 슬라이드 (Smooth slide)
슬라이더는 부드럽게 슬라이드할 수 있어요.
$('.ui.slider')
.slider({
min: 0,
max: 10,
start: 4,
step: 2
smooth: true
})
;
범위 강조 (Highlight Range)
슬라이더는 선택된 범위 값만 강조할 수 있어요.
$('.ui.slider')
.slider({
highlightRange: true,
min: 0,
max: 50,
start: 5,
end: 25
})
;
UI 라벨 (UI Labels)
슬라이더는 눈금 값에 ui 라벨을 사용할 수 있어요.
$('.ui.slider').slider({
className: {
label: 'ui tiny blue label'
},
min: 0,
max: 50
});
라벨 자동 조정 (Autoadjust Labels)
창 크기에 따라 큰 눈금 슬라이더가 모든 값을 표시하지 못할 수 있고, 그에 맞춰 라벨 개수를 조정해요.
$('.ui.slider').slider({
autoAdjustLabels: 'fixed',
min: 0,
max: 97
});
초기화 (Initializing)
슬라이더 초기화하기 (Initializing a slider)
슬라이더는 기존 마크업 위에서 초기화돼요.
$('.ui.slider')
.slider()
;
동작 (Behaviors)
Behaviors는 특정 기능에 접근하기 위해 사용하는 짧은 영어 구문이에요.
Behaviors는 Javascript에서 다음 구문으로 접근할 수 있어요:
$('.ui.slider').slider('behavior', argumentOne, argumentTwo...);
get value
현재 선택된 값을 가져와요.
get thumbValue(which)
범위 슬라이더의 엄지 중 하나의 선택 값을 가져와요. `first` 또는 `second`를 문자열 매개변수로 제공하세요.
get numLabels
렌더링된 라벨 눈금의 개수를 가져와요.
set value(value, fireChange = true)
현재 슬라이더 값을 설정해요. `onChange`와 `onMove` 콜백을 건너뛰려면 `fireChange`에 `false`를 전달하세요.
set rangeValue(fromValue, toValue, fireChange = true)
현재 범위 슬라이더 값을 설정해요. `onChange`와 `onMove` 콜백을 건너뛰려면 `fireChange`에 `false`를 전달하세요.
destroy
인스턴스를 파괴하고 모든 이벤트를 제거해요.
Slider (설정)
동작 (Behavior)
Setting / Default / Description
min
0
슬라이더가 가질 수 있는 가장 낮은 값이에요.
max
20
슬라이더가 가질 수 있는 최대 값이에요.
step
1
슬라이더의 단계예요. `0`으로 설정하면 단계를 비활성화해요.
start
0
슬라이더가 시작할 값이에요.
end
20
범위 슬라이더인 경우 설정할 두 번째 값이에요.
minRange
false
범위 슬라이더의 두 엄지가 항상 주어진 값만큼의 차이를 가져야 하게 해요.
maxRange
false
범위 슬라이더의 두 엄지가 주어진 값 이상의 차이를 가지지 않게 해요.
labelType
number
라벨 있는 슬라이더에 표시할 라벨 유형이에요. `number` 또는 `letter`일 수 있어요.
interpretLabel
false
현재 라벨 값을 매개변수로 받아 그 값에 따라 사용자 정의 라벨 텍스트를 반환하는 함수를 여기에 지정할 수 있어요.
interpretLabel: function(value){
//do something with 'value' and return matching text
return myCustomText;
}
letters
ABCDEFGHIJKLMNOPQRSTUVWXYZ
`labelType: 'letter'`를 사용할 때의 문자열 또는 문자열 배열이에요. 주어진 문자보다 더 많은 라벨이 필요한 경우 (스프레드시트의 열처럼) 문자가 "증가"해요. 예시는 [Letters](#letters)를 참고하세요.
restrictedLabels
[]
표시되는 라벨을 정의된 라벨로만 제한하는 라벨 값 배열이에요.
highlightRange
false
설정하면 선택된 범위의 라벨 값만 더 높은 불투명도로 표시돼요.
showThumbTooltip
false
호버 시 엄지에 툴팁을 표시할지 여부예요. 현재 슬라이더 값을 담아요.
tooltipConfig
{
position: 'top center',
variation: 'tiny black'
}
`showThumbTooltip`이 true일 때 사용되는 툴팁 설정이에요. 가능한 값은 [Tooltip Variations](/modules/popup#tooltip)를 참고하세요.
showLabelTicks
false
라벨 있는 슬라이더에 눈금을 표시해요.
`'always'`는 (표시되지 않더라도) 모든 라벨의 눈금을 항상 표시해요.
`true`는 관련 라벨이 표시될 때만 눈금을 표시해요.
smooth
false
슬라이더가 움직일 때의 부드러움을 정의해요.
autoAdjustLabels
true
창 크기 변경 시 라벨을 자동 조정할지 여부예요. 문자열 값 `fixed`를 사용하면 `labelDistance` 값이 항상 고정 거리가 되어 창 크기에 따라 계산된 라벨이 달라져요. 예시는 [Autoadjust Labels](#autoadjust-labels)를 참고하세요.
labelDistance
100
라벨 사이의 거리예요.
decimalPlaces
2
단계 없는 슬라이더에 사용할 소수 자릿수예요.
pageMultiplier
2
Page up/down 배수예요. page up/down을 누를 때 몇 배로 단계를 더 진행할지 정의해요.
preventCrossover
true
아래 엄지가 위 엄지 핸들을 교차하지 못하게 해요.
콜백 (Callbacks)
Callback / Context / Description
onChange
active content
슬라이더 값이 변경될 때 호출돼요.
onMove
active content
슬라이더가 움직일 때 호출돼요.