v-slider 컴포넌트는 숫자 입력을 위한 더 나은 시각화를 제공합니다. 사용의 숫자형 데이터를 수집하기 위해 사용도비니다.

사용법

슬라이더는 사용자가 단일 값을 선택할 수 있는 바를 따라 값의 범위를 반영합니다. 그것은 볼륨, 밝기 또는 이미지 필터의 적용과 같은 설정을 조정하는 데 이상적입니다.

API

예제

Min & Max values

You can set min and max values of sliders.

Disabled

You cannot interact with disabled sliders.

Readonly

You cannot interact with readonly sliders, but they look as ordinary ones.

아이콘 (Icons)

append-iconprepend-icon prop을 이용하여 슬라이더에 아이콘을 추가할 수 있습니다.

Vertical sliders

You can use vertical to switch sliders to a vertical orientation. If you need to change the height of the slider, use css.

Thumb

You can display a thumb-label while sliding or always. It 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.

Inverse label

v-slider with inverse-label property displays label at the end of it.

Custom Range slider

Using the tick-labels prop along with slots, you can create a very customized solution.

눈금 (Ticks)

눈금 마크(Tick marks)는 사용자가 슬라이더를 이동할 수 있는 미리 결정된 값을 나타냅니다.

Custom colors

You can set the colors of the slider using the props color, track-color and thumb-color.

Range

Range sliders.

검증 (Validation)

Vuetify는 rules prop 을 통해 간단한 검증(validation)을 제공합니다. rules prop은 콜백 배열을 받습니다. 규칙들(rules)을 검증할 때, 현재 v-model 값이 콜백으로 전달됩니다. 이 콜백은 true 나 에러 메시지로 String을 반환해야 합니다.

Slots

Use slots such as prepend and append to easily customize the v-slider to fit any situation.

Edit this page | language on Github
Vuetify
상점For Enterprise