The v-slider component is a better visualization of the number input. It is used for gathering numerical user data.
슬라이더는 사용자가 단일 값을 선택할 수 있는 바를 따라 값의 범위를 반영합니다. 그것은 볼륨, 밝기 또는 이미지 필터의 적용과 같은 설정을 조정하는 데 이상적입니다.
간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.
You can set min and max values of sliders.
You cannot interact with disabled sliders.
You cannot interact with readonly sliders, but they look as ordinary ones.
append-icon과 prepend-icon prop을 이용하여 슬라이더에 아이콘을 추가할 수 있습니다.
You can use vertical to switch sliders to a vertical orientation. If you need to change the height of the slider, use css.
You can display a thumb-label while sliding or always. It can have a custom color by setting thumb-color and a custom size with thumb-size. With always-dirty its color will never change, even when on min value.
v-slider with inverse-label property displays label at the end of it.
Using the tick-labels prop along with slots, you can create a very customized solution.
눈금 마크(Tick marks)는 사용자가 슬라이더를 이동할 수 있는 미리 결정된 값을 나타냅니다.
color, track-color와 thumb-color prop들을 이용해 슬라이더의 색상을 정의할 수 있습니다.
Range sliders.
Vuetify는 rules prop 을 통해 간단한 검증(validation)을 제공합니다. rules prop은 콜백 배열을 받습니다. 규칙들(rules)을 검증할 때, 현재 v-model 값이 콜백으로 전달됩니다. 이 콜백은 true 나 에러 메시지로 String을 반환해야 합니다.
Use slots such as prepend and append to easily customize the v-slider to fit any situation.