Slider
#

The slider component is a visualization for the number input. A user can drag a slider within a fixed range to get the required value.

Examples
#

Default
#

This is basic usage of the slider component.

Open in GitHub

Color
#

You can customize the color of the slider.

Open in GitHub

Minimum and maximum values
#

You can set a range between min and max values.

45
Open in GitHub

State
#

Slider can be in disabled or readonly state.

Disabled
Readonly
Open in GitHub

Range slider
#

You can set a range of values.

Open in GitHub

Step
#

Step can be changed.

Open in GitHub

Pins
#

Display markers on slider track.

Open in GitHub

Label
#

Switch label can have an inverted position or a custom color.

label
inverted
danger
Open in GitHub

Slots
#

You can add inputs before and after the slider using 'append' or 'prepend' slot name. Also default label can be replaced using 'label' slot.

LABEL SLOT
Open in GitHub

Icon
#

You can insert icon at the start or end of slider.

Open in GitHub

Track
#

Track can be hidden or have custom color.

Open in GitHub

Track label
#

You can show track label and overwrite it's view.

45
65
min 45$
max 65$
45
65
Open in GitHub

Vertical
#

Vertical state of slider.

45
45
65
45
Open in GitHub

Accessibility
#

The component covers all the requirements of w3 slider template. It has role="slider" and the following attributes: aria-valuemin, aria-valuemax, aria-valuenow, aria-label, aria-orientation, aria-disabled, aria-readonly.

API
#

Props #

NameDescriptionTypesDefault
ariaLabel

String

"$t:sliderValue"

color

String

"primary"

disabled

Boolean

false

iconAppend

String

""

iconPrepend

String

""

invertLabel

Boolean

false

label

String

""

labelColor

String

""

max

Number

100

min

Number

0

modelValue

Number | Array

0

pins

Boolean

false

preset

String

-

range

Boolean

false

readonly

Boolean

false

showTrack

Boolean

true

stateful

Boolean

false

step

Number

1

trackColor

String

""

trackLabel

Function | String

-

trackLabelVisible

Boolean

false

vertical

Boolean

false

Events #

NameDescription

change

Emitted on value input.. The event argument is:

`Number | [Number, Number]`

dragEnd

Emitted on drag end.

dragStart

Emitted on drag start.

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model

Slots #

NameDescription

append

Slot for input after slider.

label

Replaces the default label.

prepend

Slot for input before slider.

trackLabel

The content of the track-label. Slot scope has access to value and order (for range type) variables.

Css Variables #

NameDefault Value
--va-slider-track-border-radius 0.25rem
--va-slider-track-transition 0.5s ease-out
--va-slider-track-opacity 1
--va-slider-pin-transition background-color 0.3s ease-out 0.1s
--va-slider-handler-width 1.25rem
--va-slider-handler-height 1.25rem
--va-slider-handler-background var(--va-background-primary)
--va-slider-handler-border 0.375rem solid
--va-slider-handler-border-radius 50%
--va-slider-handler-outline none !important
--va-slider-handler-left -0.375rem
--va-slider-handler-transition 0s
--va-slider-dot-transform translate(-0.625rem, -0.625rem)
--va-slider-dot-display block
--va-slider-dot-width 1.75rem
--va-slider-dot-height 1.75rem
--va-slider-dot-border-radius 50%
--va-slider-dot-opacity 0.2
--va-slider-dot-pointer-events none
--va-slider-dot-value-transform translate(-50%, -100%)
--va-slider-dot-value-user-select none
--va-slider-dot-value-font-size 0.625rem
--va-slider-dot-value-letter-spacing 0.6px
--va-slider-dot-value-line-height 1.2
--va-slider-dot-value-font-weight 700
--va-slider-dot-value-text-transform none
--va-slider-dot-value-white-space nowrap
--va-slider-input-label-user-select none
--va-slider-input-label-font-size 0.625rem
--va-slider-input-label-letter-spacing 0.6px
--va-slider-input-label-line-height 1.2
--va-slider-input-label-font-weight 700
--va-slider-input-label-text-transform uppercase
--va-slider-input-label-inverse-user-select none
--va-slider-input-label-inverse-font-size 0.625rem
--va-slider-input-label-inverse-letter-spacing 0.6px
--va-slider-input-label-inverse-line-height 1.2
--va-slider-input-label-inverse-font-weight 700
--va-slider-input-label-inverse-text-transform uppercase
--va-slider-horizontal-input-wrapper-margin-right 1rem
--va-slider-horizontal-track-height 0.5rem
--va-slider-horizontal-track-width 100%
--va-slider-horizontal-handler-transform translateX(-50%)
--va-slider-horizontal-dot-value-top -8px
--va-slider-horizontal-dot-value-left 50%
--va-slider-vertical-height 100%
--va-slider-vertical-padding 12px 0 12px 0
--va-slider-vertical-flex-direction column
--va-slider-vertical-align-items center
--va-slider-vertical-label-margin-bottom 0.625rem
--va-slider-vertical-label-inverse-left -0.375rem
--va-slider-vertical-label-inverse-margin-top 0.625rem
--va-slider-vertical-input-wrapper-max-width 1rem
--va-slider-vertical-input-wrapper-min-width 2.5rem
--va-slider-vertical-track-height 100%
--va-slider-vertical-track-width 0.5rem
--va-slider-vertical-track-bottom 0
--va-slider-vertical-handler-transform translateY(50%)
--va-slider-vertical-dot-value-top 0.625rem
--va-slider-vertical-dot-value-left 1.25rem