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 name | Description | Type | Values | Default |
---|---|---|---|---|
ariaLabel | Accessibility aria-label to to be passed to the slider thumb element. | string | - | From config: slider: { |
biggerSliderFocus | Increases slider size on focus | boolean | - | false |
disabled | Slider will be disabled | boolean | - | false |
format | Define v-model format | "percent" | "raw" | row , percent | From config: slider: { |
formatter | Function to format the tooltip label for display | ((value: number) => string) | - | |
indicator | Show indicators | boolean | - | false |
lazy | Update v-model only when dragging is finished | boolean | - | false |
locale | Date format locale | string | string[] | - | From config: { |
max | Maximum value | number | - | 100 |
min | Minimum value | number | - | 0 |
v-model | The input value state | [number, number] | number | - | |
override | Override existing theme classes completely | boolean | - | |
range | Enable range slider | boolean | - |
|
rounded | Rounded thumb | boolean | - | From config: slider: { |
size | Vertical size of slider | string | small , medium , large | From config: slider: { |
step | Step interval of ticks | number | - | 1 |
ticks | Show tick marks | boolean | - | false |
tooltip | Show tooltip when thumb is being dragged | boolean | - | From config: slider: { |
tooltipAlways | Tooltip displays always | boolean | - | false |
tooltipVariant | Color of the tooltip | string | primary , info , success , warning , danger , and any other custom color | From config: slider: { |
variant | Color of the slider | string | primary , info , success , warning , danger , and any other custom color | From config: slider: { |
Events
Event name | Properties | Description |
---|---|---|
update:model-value | value number | number[] - updated modelValue prop | modelValue prop two-way binding |
change | value number | number[] - updated modelValue prop | on value change event |
dragging | value number | number[] - updated modelValue prop | on dragging event |
dragstart | on drag start event | |
dragend | on drag end event |
Slots
Name | Description | Bindings |
---|---|---|
default | Define additional slider ticks here |
SliderTick component
html
<o-slider-tick></o-slider-tick>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
label | Tick label | number | string | - | |
override | Override existing theme classes completely | boolean | - | |
value | Value of single tick | number | - |
|
Slots
Name | Description | Bindings |
---|---|---|
default | Override tick content, default is label prop |
Class Inspector
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
rootClass | Class of the root element. | |||
sizeClass | Class of the root elment with size. | size | small | |
disabledClass | Class of the root element when disabled. | disabled | ||
trackClass | Class of the slider track element. | |||
fillClass | Class of the filled part of the slider. | |||
variantClass | Class of the filled part of the slider with variant. | variant | primary | |
thumbWrapperClass | Class of the thumb wrapper element. | |||
thumbWrapperDraggingClass | Class to the thumb wrapper element when the slider is dragged . 👉 Drag the thumb to see it in action! | |||
thumbClass | Class of the thumb element. | |||
thumbRoundedClass | Class of the thumb element when rounded. | rounded | ||
thumbDraggingClass | Class of the thumb element when is dragged. 👉 Drag the thumb to see it in action! | |||
▷ tickClass | Class of the slider tick element. | ticks | ||
▷ tickHiddenClass | Class of the slider tick element when is hidden. | ticks | ||
▷ tickLabelClass | Class of the slider tick label element. | ticks |
Sass variables
Current theme ➜ Oruga
SASS Variable | Default |
---|---|
$slider-background | transparent |
$slider-margin | 1em 0 |
$slider-mark-size | 0.75rem |
$slider-font-size | var(--#{$prefix}base-font-size) |
$slider-rounded-borded-radius | var( --#{$prefix}base-border-radius-rounded) |
$slider-thumb-background | var(--#{$prefix}white) |
$slider-thumb-border | 1px solid var(--#{$prefix}grey-light) |
$slider-thumb-radius | var(--#{$prefix}base-border-radius) |
$slider-thumb-shadow | none |
$slider-thumb-to-track-ratio | 2 |
$slider-thumb-transform | scale(1.25) |
$slider-tick-background | var(--#{$prefix}primary) |
$slider-tick-radius | var(--#{$prefix}base-border-radius) |
$slider-tick-to-track-ratio | 0.5 |
$slider-tick-width | 3px |
$slider-track-background | var(--#{$prefix}grey-lighter) |
$slider-fill-background | var(--#{$prefix}primary) |
$slider-track-border-radius | var(--#{$prefix}base-border-radius) |
$slider-track-border | 0px solid var(--#{$prefix}grey) |
$slider-track-disabled | 0.5 |
$slider-track-radius | var(--#{$prefix}base-border-radius) |
$slider-track-shadow | 0px 0px 0px var(--#{$prefix}grey) |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
SASS Variable | Default |
---|---|
$slider-tick-label-size | 0.75rem |
$slider-thumb-shadow | none |
$slider-thumb-to-track-ratio | 2 |
$slider-tick-to-track-ratio | 0.5 |
$slider-tick-width | 3px |
$slider-colors | dv.$colors |
$slider-radius | css.getVar("radius") |
$slider-background | css.getVar("grey-lighter") |
$slider-color | css.getVar("primary") |
$slider-track-border | 0px solid css.getVar("grey") |
$slider-track-shadow | 0px 0px 0px css.getVar("grey") |
$slider-thumb-background | css.getVar("scheme-main") |
$slider-thumb-radius | css.getVar("radius") |
$slider-thumb-border | 1px solid css.getVar("grey-light") |
$slider-tick-radius | css.getVar("radius") |
$slider-tick-background | css.getVar("grey-light") |
See ➜ 📄 Full scss file
Current theme ➜ Bootstrap
SASS Variable | Default |
---|---|
$slider-tick-width | 0.25rem |
$slider-tick-height | 0.25rem |
$slider-tick-radius | 50% |
$slider-tick-bg | var(--#{$prefix}gray) |
See ➜ 📄 Full scss file