Skip to content

Slider

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

Examples

Base

Show code

Sizes

Show code

Variants

Show code

Customise

Show code

Tick and label

Show code

Range

Show code

Class props

'Classes applied to the element'

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"raw" | "percent"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 statenumber | [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:modelValuevalue 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 labelstring-
overrideOverride existing theme classes completelyboolean-
valueValue of single ticknumber-

Slots

NameDescriptionBindings
defaultOverride tick content, default is label prop

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

The theme does not have any custom variables for this component.

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.