Skip to content
On this page

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

3
5
8
Off
Low
High
Auto

Show code

Range

[ 2, 5 ]

[ 2, 6 ]

Show code

Class props ​

'Classes applied to the element'
1
2
3
4
5
6
7
8
9
How does the Class props inspector work?
Class propDescriptionPropsSuffixes
disabledClassClass when slider is disabled.disabled
fillClassClass of the filled part of the slider.
rootClassRoot class of the element.
thumbClassClass of the thumb.
thumbDraggingClassClass when the thumb gets dragged.
πŸ‘‰ Drag the thumb to see it in action!
thumbRoundedClassClass when the slider is rounded.rounded
thumbWrapperClassClass of the thumb wrapper.
β–· tickClassClass of slider tick.ticks
β–· tickHiddenClassClass when slider tick is hidden.ticks
β–· tickLabelClassClass of tick label.ticks
trackClassClass of the slider track.
variantClassClass of the slider variant.variantprimary
info
warning
danger

Slider component ​

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

Props ​

Prop nameDescriptionTypeValuesDefault
ariaLabelstring|array-
biggerSliderFocusIncreases slider size on focusboolean-false
customFormatterFunction to format the tooltip label for displayfunc-
disabledboolean-false
formatstring-'raw'
indicatorboolean-false
lazyUpdate v-model only when dragging is finishedboolean-false
localestring|array-
From config:
{
Β Β  locale: undefined
}
maxMaximum valuenumber-100
minMinimum valuenumber-0
overrideboolean-
roundedRounded thumbboolean-
From config:
slider: {
Β Β rounded: false
}
sizeVertical size of slider, optionalstringsmall, medium, large
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
v-modelnumber|array-0
variantColor of the sliderstringprimary, info, success, warning, danger, and any other custom color

Events ​

Event namePropertiesDescription
update:modelValue
change
dragging
dragstart
dragend

Slots ​

NameDescriptionBindings
default

SliderTick component ​

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

Props ​

Prop nameDescriptionTypeValuesDefault
overrideboolean-
valueValue of single ticknumber-0

Slots ​

NameDescriptionBindings
default

Sass variables ​

Current theme ➜ Oruga Base

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

See ➜ πŸ“„ Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$slider-backgroundtransparent
$slider-margin1em 0
$slider-mark-size0.75rem
$slider-font-size$base-font-size
$slider-rounded-borded-radius$base-rounded-border-radius
$slider-thumb-background$white
$slider-thumb-border1px solid $grey-light
$slider-thumb-radius$base-border-radius
$slider-thumb-shadownone
$slider-thumb-to-track-ratio2
$slider-thumb-transformscale(1.25)
$slider-tick-background$primary
$slider-tick-radius$base-border-radius
$slider-tick-to-track-ratio0.5
$slider-tick-width3px
$slider-track-background$grey-lighter
$slider-fill-background$primary
$slider-track-border-radius$base-border-radius
$slider-track-border0px solid $grey
$slider-track-disabled0.5
$slider-track-radius$base-border-radius
$slider-track-shadow0px 0px 0px $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.