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

The aria-label of the component

String

"$t:sliderValue"

color

Color of slider.

String

"primary"

disabled

Disables slider.

Boolean

false

iconAppend

Icon at the end of slider.

String

""

iconPrepend

Icon at the start of slider.

String

""

invertLabel

Moves label to opposite side.

Boolean

false

label

Slider label

String

""

labelColor

Color of slider label.

String

""

max

Maximum value.

Number | String

100

min

Minimum value.

Number | String

0

modelValue

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 | Array

-

range

Transforms single value slider into range slider.

Boolean

false

readonly

Makes slider read only.

Boolean

false

showTrack

Toggles track display.

Boolean

true

stateful

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

Boolean

false

step

Slider value step.

Number | String

1

trackColor

Color of slider base track.

String

""

trackLabel

Label of slider track.

Function | String

-

trackLabelVisible

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]`

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 and must be listed after the 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