Slider

The v-slider component is a better visualization of the number input. It is used for gathering numerical user data.

Usage

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
Name
always-dirty New in — v1.1
Default
false
Type
boolean

Components.Sliders.

Name
append-icon
Default
undefined
Type
string

Components.Sliders.

Name
background-color
Default
undefined
Type
string

Components.Sliders.

Name
color
Default
undefined
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前(例えばsuccesspurple)や、CSSの色指定(#033rgba(255, 0, 0, 0.5))を設定できます。

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
disabled
Default
false
Type
boolean

Components.Sliders.

Name
error
Default
false
Type
boolean

Components.Sliders.

Name
error-count
Default
1
Type
number | string

Components.Sliders.

Name
error-messages
Default
[]
Type
string | array

Components.Sliders.

Name
height
Default
undefined
Type
number | string

Components.Sliders.

Name
hide-details
Default
false
Type
boolean

Components.Sliders.

Name
hint
Default
undefined
Type
string

Components.Sliders.

Name
inverse-label New in — v1.1
Default
false
Type
boolean

Components.Sliders.

Name
label
Default
undefined
Type
string

Components.Sliders.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
loading
Default
false
Type
boolean | string

Components.Sliders.

Name
max
Default
100
Type
number | string

Components.Sliders.

Name
messages
Default
[]
Type
string | array

Components.Sliders.

Name
min
Default
0
Type
number | string

Components.Sliders.

Name
persistent-hint
Default
false
Type
boolean

Components.Sliders.

Name
prepend-icon
Default
undefined
Type
string

Components.Sliders.

Name
readonly
Default
false
Type
boolean

Components.Sliders.

Name
rules
Default
[]
Type
array

Components.Sliders.

Name
step
Default
1
Type
number | string

Components.Sliders.

Name
success New in — v1.1
Default
false
Type
boolean

Components.Sliders.

Name
success-messages New in — v1.1
Default
[]
Type
string | array

Components.Sliders.

Name
thumb-color
Default
undefined
Type
string

Components.Sliders.

Name
thumb-label
Default
undefined
Type
boolean | string

Components.Sliders.

Name
thumb-size New in — v1.1
Default
32
Type
number | string

Components.Sliders.

Name
tick-labels New in — v1.1
Default
[]
Type
array

Components.Sliders.

Name
tick-size New in — v1.1
Default
1
Type
number | string

Components.Sliders.

Name
ticks
Default
false
Type
boolean | string

Components.Sliders.

Name
track-color
Default
undefined
Type
string

Components.Sliders.

Name
validate-on-blur
Default
false
Type
boolean

Components.Sliders.

Name
value
Default
undefined
Type
number | string

Components.Sliders.

Examples

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 slider

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

Ticks

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

Discrete

Discrete sliders offer a thumb label that displays the exact current amount. Using the step prop you can disallow selecting values outside of steps.

Icons

You can add icons to the slider with the append-icon and prepend-icon props. With @click:append and @click:prepend you can trigger a callback function when click the icon.

With an editable numeric value

Sliders can be combined with other components for a better display.

Custom colors

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

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.

Range

Range sliders.

Min & Max values

You can set min and max values of sliders.

Metronome

Use slotted prepend and append icons to easily customize the v-slider to fit any situation.

Edit this page | language on Github