슬라이더 (Slider)

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

사용법

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.


API

v-slider

예제

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.


Custom Range sliderNew in v1.1

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


TicksNew in v1.1

Tick marks represent predetermined values to which the user can move the slider.


불연속 (Discrete)

불연속(Discrete) 슬라이더는 정확한 현재 값을 보여주기 위한 작은 레이블(Thumb label)을 제공합니다. step prop를 이용하여 step 을 이외의 값을 선택하는 것을 방지할 수 있습니다.


아이콘 (Icons)

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


수정가능한 숫자값 (With an editable numeric value)

슬라이더는 더 낳은 표현을 위해 다른 컴포넌트와 결합될 수 있습니다.


사용자지정 생상 (Custom colors)

color, track-colorthumb-color prop들을 이용해 슬라이더의 색상을 정의할 수 있습니다.


Validation

Vuetify includes simple validation through the rules prop. The prop accepts an array of callbacks. While validating rules, the current v-model value will be passed to the callback. This callback should return either true or a String, the error message.


RangeNew in v1.1

Range sliders.


Min & Max values

You can set min and max values of sliders.