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
aria-label

The aria-label of the component

String

"$t:sliderValue"

color

Color of slider.

String

"primary"

disabled

Disables slider.

Boolean

false

icon-append

Icon at the end of slider.

String

""

icon-prepend

Icon at the start of slider.

String

""

invert-label

Moves label to opposite side.

Boolean

false

label

Slider label

String

""

label-color

Color of slider label.

String

""

max

Maximum value.

Number

100

min

Minimum value.

Number

0

model-value

The value of the v-model bindings.

Number | Array

0

pins

Adds step marks to a slider track.

Boolean

false

preset

Named preset combination of component props.

String

-

range

Transforms single value slider into range slider.

Boolean

false

readonly

Makes slider read only.

Boolean

false

show-track

Toggles track display.

Boolean

true

stateful

Add possibility to work with component without setting v-model.

Boolean

false

step

Slider value step.

Number

1

track-color

Color of slider base track.

String

""

track-label

Label of slider track.

Function | String

-

track-label-visible

Toggles track label visibility.

Boolean

false

vertical

Makes slider vertical.

Boolean

false

Events #

NameDescription

change

Emitted on value input.. The event argument is:

`Number | [Number, Number]`

drag-end

Emitted on drag end.

drag-start

Emitted on drag start.

dragEnd

Emitted on drag end.

dragStart

Emitted on drag start.

update-model-value

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