Slider

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

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"
            :custom-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

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

Show code

HTML

<section>
    <o-field label="Primary">
        <o-slider
            v-model="value"
            :rounded="true"
            :tooltip="true"
            variant="primary"
            tooltip-variant="primary" />
    </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="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

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" :val="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

Show code

HTML

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

    <o-field>
        <o-slider
            v-model="numbers2"
            range
            variant="danger"
            :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]);

Class props

'Classes applied to the element'

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
customFormatter	Function to format the tooltip label for display	Function	-
disabled	Slider will be disabled	boolean	-	false
format	Define v-model format	"raw" | "percent"	row, percent	From config: slider: {   format: "raw" }
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	number | [number, number]	-
override	Override existing theme classes completely	boolean	-
range	Enable range slider	boolean	-
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:modelValue	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	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

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

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

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