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

Show code

HTML

<section>
    <o-field label="Simple">
        <o-slider :model-value="8" />
    </o-field>

    <o-field label="Disabled">
        <o-slider :model-value="30" disabled />
    </o-field>

    <o-field label="Tooltip type">
        <o-slider v-model="sliderValue" :tooltip-variant="sliderType" />
    </o-field>

    <o-field label="Hide tooltip">
        <o-slider :model-value="20" :tooltip="false" />
    </o-field>

    <o-field label="Custom tooltip label">
        <o-slider :model-value="30" :formatter="(val) => val + '%'" />
    </o-field>

    <o-field label="Rounded thumb">
        <o-slider :model-value="8" rounded />
    </o-field>
</section>

JS

import { computed, ref } from "vue";

const sliderValue = ref(10);

const sliderType = computed(() => {
    if (sliderValue.value > 25 && sliderValue.value < 75) return "warning";
    else if (sliderValue.value >= 75) return "success";
    return "danger";
});

Sizes

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

Show code

HTML

<section>
    <o-field label="Small">
        <o-slider v-model="value" size="small" />
    </o-field>

    <o-field label="Default">
        <o-slider v-model="value" />
    </o-field>

    <o-field label="Medium">
        <o-slider v-model="value" size="medium" />
    </o-field>

    <o-field label="Large">
        <o-slider v-model="value" size="large" />
    </o-field>
</section>

JS

import { ref } from "vue";

const value = ref(15);

Variants

Different styles can be achieved with the variant prop.

Show code

HTML

<section>
    <o-field label="Default">
        <o-slider v-model="value" :rounded="true" :tooltip="true" />
    </o-field>

    <o-field label="Primary">
        <o-slider
            v-model="value"
            :rounded="true"
            :tooltip="true"
            variant="primary"
            tooltip-variant="primary" />
    </o-field>

    <o-field label="Secondary">
        <o-slider
            v-model="value"
            :rounded="true"
            :tooltip="true"
            variant="secondary"
            tooltip-variant="secondary" />
    </o-field>

    <o-field label="Success">
        <o-slider
            v-model="value"
            :rounded="true"
            :tooltip="true"
            variant="success"
            tooltip-variant="success" />
    </o-field>

    <o-field label="Info">
        <o-slider
            v-model="value"
            :rounded="true"
            :tooltip="true"
            variant="info"
            tooltip-variant="info" />
    </o-field>

    <o-field label="Warning">
        <o-slider
            v-model="value"
            :rounded="true"
            :tooltip="true"
            variant="warning"
            tooltip-variant="warning" />
    </o-field>

    <o-field label="Danger">
        <o-slider
            v-model="value"
            :rounded="true"
            :tooltip="true"
            variant="danger"
            tooltip-variant="danger" />
    </o-field>
</section>

JS

import { ref } from "vue";

const value = ref(15);

Customise

Show code

HTML

<section>
    <o-field grouped>
        <o-field>
            <o-switch v-model="rounded" label="Rounded" />
        </o-field>
        <o-field>
            <o-switch v-model="tooltip" label="With Tooltip" />
        </o-field>
        <o-field label="Size">
            <o-select v-model="size">
                <option value="small">small</option>
                <option value="default">default</option>
                <option value="medium">medium</option>
                <option value="large">large</option>
            </o-select>
        </o-field>
        <o-field label="Variant">
            <o-select v-model="variant">
                <option value="default">default</option>
                <option value="primary">primary</option>
                <option value="secondary">secondary</option>
                <option value="success">success</option>
                <option value="info">info</option>
                <option value="warning">warning</option>
                <option value="danger">danger</option>
            </o-select>
        </o-field>
    </o-field>

    <o-field label="Tooltip type & Default Variant">
        <o-slider
            :rounded="rounded"
            :tooltip="tooltip"
            :variant="variant"
            :size="size" />
    </o-field>
</section>

JS

import { ref } from "vue";

const rounded = ref(false);
const tooltip = ref(true);
const variant = ref("warning");
const size = ref("medium");

Tick and label

Customise the labels using slots.

Show code

HTML

<section>
    <o-field label="Show ticks">
        <o-slider :min="1" :max="10" ticks />
    </o-field>

    <o-field label="Custom tick and label">
        <o-slider size="medium" :min="0" :max="10">
            <template v-for="val in [3, 5, 8]" :key="val">
                <o-slider-tick :value="val" :label="val" />
            </template>
        </o-slider>
    </o-field>

    <o-field label="Fan">
        <o-slider
            :rounded="true"
            :min="0"
            :max="3"
            aria-label="Fan"
            :tooltip="false">
            <o-slider-tick :value="0">Off</o-slider-tick>
            <o-slider-tick :value="1">Low</o-slider-tick>
            <o-slider-tick :value="2">High</o-slider-tick>
            <o-slider-tick :value="3">Auto</o-slider-tick>
        </o-slider>
    </o-field>
    <br />
</section>

Range

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

Show code

HTML

<section>
    <o-field label="Range with ticks">
        <o-slider
            v-model="numbers"
            ticks
            range
            :min="1"
            :max="15"
            :step="0.5" />
    </o-field>
    <p>{{ numbers }}</p>

    <o-field label="Range with variant">
        <o-slider
            v-model="numbers2"
            variant="danger"
            range
            :min="-2"
            :max="8"
            :step="2" />
    </o-field>
    <p>{{ numbers2 }}</p>
</section>

JS

import { ref } from "vue";

const numbers = ref<[number, number]>([2, 5]);
const numbers2 = ref<[number, number]>([2, 6]);

Slider Component

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

<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: {   ariaLabel: undefined }
biggerSliderFocus	Increases slider size on focus	boolean	-	false
disabled	Interaction will be disabled	boolean	-	false
format	Define v-model format	"percent" | "raw"	row, percent	From config: slider: {   format: "raw" }
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: {   locale: undefined }
max	Maximum value	number	-	100
min	Minimum value	number	-	0
v-model	The input value state, use v-model to make it two-way binding	ValueType<IsRange>	-
override	Override existing theme classes completely	boolean	-
range	Enable range slider	IsRange	-
rounded	Rounded thumb	boolean	-	From config: slider: {   rounded: false }
size	Vertical size of slider	string	small, medium, large	From config: slider: {   size: undefined }
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: {   tooltip: true }
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: {   tooltipVariant: undefined }
variant	Color of the slider	string	primary, info, success, warning, danger, and any other custom color	From config: slider: {   variant: undefined }

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

<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

Classes applied to the element:

➜ Want to know how does the Class Inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
sizeClass	Class of the root element with size.	size	small medium large
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.
fillVariantClass	Class of the filled part of the slider with variant.	variant	primary info warning danger
thumbWrapperClass	Class of the thumb wrapper element.
thumbWrapperDraggingClass	Class of 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
▷ tickBeforeClass	Class of the slider tick element when is before the value.	ticks
▷ tickAfterClass	Class of the slider tick element when is after the value.	ticks
▷ tickLabelClass	Class of the slider tick label element.	ticks

Sass Variables

Current theme ➜ Oruga

SASS Variable	Default
$slider-padding	1em 0
$slider-disabled-opacity	h.useVar("control-disabled-opacity")
$slider-font-size	h.useVar("font-size")
$slider-track-to-thumb-ratio	2
$slider-track-height	calc( h.useVar("slider-thumb-size") / $slider-track-to-thumb-ratio)
$slider-track-box-shadow	h.useVar("control-box-shadow")
$slider-track-border-width	0px
$slider-track-border-style	solid
$slider-track-border-color	h.useVar("grey")
$slider-track-border-radius	h.useVar("border-radius")
$slider-track-background-color	h.useVar("grey-lighter")
$slider-fill-box-shadow	h.useVar("control-box-shadow")
$slider-fill-background-color	h.useVar("primary")
$slider-thumb-size	h.useVar("slider-font-size")
$slider-thumb-font-size	calc(0.85 * h.useVar("slider-font-size"))
$slider-thumb-font-weight	h.useVar("font-weight")
$slider-thumb-line-height	h.useVar("line-height")
$slider-thumb-box-shadow	none
$slider-thumb-border-width	1px
$slider-thumb-border-style	solid
$slider-thumb-border-color	h.useVar("grey-light")
$slider-thumb-border-radius	h.useVar("border-radius")
$slider-thumb-border-radius-rounded	h.useVar("border-radius-rounded")
$slider-thumb-background-color	h.useVar("control-background-color")
$slider-thumb-transform	scale(1.25)
$slider-tick-to-track-ratio	0.5
$slider-tick-size	calc( h.useVar("slider-track-height") * $slider-tick-to-track-ratio)
$slider-tick-color	h.useVar("font-color")
$slider-tick-font-size	0.75em
$slider-tick-font-weight	h.useVar("font-weight")
$slider-tick-line-height	h.useVar("line-height")
$slider-tick-background-color	h.useVar("primary")
$slider-tick-radius	h.useVar("border-radius")

See ➜ 📄 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 ➜ 📄 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 ➜ 📄 SCSS file

Current theme ➜ Tailwind

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