Skip to content

Slider

The Slider input component let user select a value or range from a given range with a graphic slider. The component implements the W3C ARIA APG Slider Pattern. Use it with the Field component to access all the functionalities.

Examples

Base

Sizes

The component can be displayed in different sizes using the size prop.

Variants

Different styles can be achieved with the variant prop.

Customise

Tick and label

Customise the labels using slots.

Range

When the range prop is set, the modelValue property will be an array of two values instead of a single value.

Slider component

A slider to select a value or range from a given range.

html
<o-slider></o-slider>

Props

Prop nameDescriptionTypeValuesDefault
ariaLabelAccessibility aria-label to to be passed to the slider thumb element.string-
From config:
slider: {
  ariaLabel: undefined
}
biggerSliderFocusIncreases slider size on focusboolean-false
disabledSlider will be disabledboolean-false
formatDefine v-model format"percent" | "raw"row, percent
From config:
slider: {
  format: "raw"
}
formatterFunction to format the tooltip label for display((value: number) => string)-
indicatorShow indicatorsboolean-false
lazyUpdate v-model only when dragging is finishedboolean-false
localeDate format localestring | string[]-
From config:
{
  locale: undefined
}
maxMaximum valuenumber-100
minMinimum valuenumber-0
v-modelThe input value state[number, number] | number-
overrideOverride existing theme classes completelyboolean-
rangeEnable range sliderboolean-
roundedRounded thumbboolean-
From config:
slider: {
  rounded: false
}
sizeVertical size of sliderstringsmall, medium, large
From config:
slider: {
  size: undefined
}
stepStep interval of ticksnumber-1
ticksShow tick marksboolean-false
tooltipShow tooltip when thumb is being draggedboolean-
From config:
slider: {
  tooltip: true
}
tooltipAlwaysTooltip displays alwaysboolean-false
tooltipVariantColor of the tooltipstringprimary, info, success, warning, danger, and any other custom color
From config:
slider: {
  tooltipVariant: undefined
}
variantColor of the sliderstringprimary, info, success, warning, danger, and any other custom color
From config:
slider: {
  variant: undefined
}

Events

Event namePropertiesDescription
update:model-valuevalue number | number[] - updated modelValue propmodelValue prop two-way binding
changevalue number | number[] - updated modelValue propon value change event
draggingvalue number | number[] - updated modelValue propon dragging event
dragstarton drag start event
dragendon drag end event

Slots

NameDescriptionBindings
defaultDefine additional slider ticks here

SliderTick component

html
<o-slider-tick></o-slider-tick>

Props

Prop nameDescriptionTypeValuesDefault
labelTick labelnumber | string-
overrideOverride existing theme classes completelyboolean-
valueValue of single ticknumber-

Slots

NameDescriptionBindings
defaultOverride tick content, default is label prop

Class Inspector

Classes applied to the element:
Class propDescriptionPropsSuffixes
rootClassClass of the root element.
sizeClassClass of the root elment with size.sizesmall
medium
large
disabledClassClass of the root element when disabled.disabled
trackClassClass of the slider track element.
fillClassClass of the filled part of the slider.
variantClassClass of the filled part of the slider with variant.variantprimary
info
warning
danger
thumbWrapperClassClass of the thumb wrapper element.
thumbWrapperDraggingClassClass to the thumb wrapper element when the slider is dragged .
👉 Drag the thumb to see it in action!
thumbClassClass of the thumb element.
thumbRoundedClassClass of the thumb element when rounded.rounded
thumbDraggingClassClass of the thumb element when is dragged.
👉 Drag the thumb to see it in action!
tickClassClass of the slider tick element.ticks
tickHiddenClassClass of the slider tick element when is hidden.ticks
tickLabelClassClass of the slider tick label element.ticks

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$slider-backgroundtransparent
$slider-margin1em 0
$slider-mark-size0.75rem
$slider-font-sizevar(--#{$prefix}base-font-size)
$slider-rounded-borded-radiusvar( --#{$prefix}base-border-radius-rounded)
$slider-thumb-backgroundvar(--#{$prefix}white)
$slider-thumb-border1px solid var(--#{$prefix}grey-light)
$slider-thumb-radiusvar(--#{$prefix}base-border-radius)
$slider-thumb-shadownone
$slider-thumb-to-track-ratio2
$slider-thumb-transformscale(1.25)
$slider-tick-backgroundvar(--#{$prefix}primary)
$slider-tick-radiusvar(--#{$prefix}base-border-radius)
$slider-tick-to-track-ratio0.5
$slider-tick-width3px
$slider-track-backgroundvar(--#{$prefix}grey-lighter)
$slider-fill-backgroundvar(--#{$prefix}primary)
$slider-track-border-radiusvar(--#{$prefix}base-border-radius)
$slider-track-border0px solid var(--#{$prefix}grey)
$slider-track-disabled0.5
$slider-track-radiusvar(--#{$prefix}base-border-radius)
$slider-track-shadow0px 0px 0px var(--#{$prefix}grey)

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$slider-tick-label-size0.75rem
$slider-thumb-shadownone
$slider-thumb-to-track-ratio2
$slider-tick-to-track-ratio0.5
$slider-tick-width3px
$slider-colorsdv.$colors
$slider-radiuscss.getVar("radius")
$slider-backgroundcss.getVar("grey-lighter")
$slider-colorcss.getVar("primary")
$slider-track-border0px solid css.getVar("grey")
$slider-track-shadow0px 0px 0px css.getVar("grey")
$slider-thumb-backgroundcss.getVar("scheme-main")
$slider-thumb-radiuscss.getVar("radius")
$slider-thumb-border1px solid css.getVar("grey-light")
$slider-tick-radiuscss.getVar("radius")
$slider-tick-backgroundcss.getVar("grey-light")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS VariableDefault
$slider-tick-width0.25rem
$slider-tick-height0.25rem
$slider-tick-radius50%
$slider-tick-bgvar(--#{$prefix}gray)

See ➜ 📄 Full scss file

Released under the MIT License.