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";
});

css

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);

css

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);

css

Customise

Show code

HTML

<section>
    <o-field grouped>
        <o-field>
            <o-switch v-model="settings.rounded" label="Rounded" />
        </o-field>
        <o-field>
            <o-switch v-model="settings.tooltip" label="With Tooltip" />
        </o-field>
        <o-field label="Size">
            <o-select v-model="settings.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="settings.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="settings.rounded"
            :tooltip="settings.tooltip"
            :variant="settings.variant"
            :size="settings.size" />
    </o-field>
</section>

JS

import { reactive } from "vue";

const settings = reactive({
    rounded: false,
    tooltip: true,
    variant: "warning",
    size: "medium",
});

css

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>

js

css

Range

Show code

HTML

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

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

JS

import { ref } from "vue";

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

css

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 | string[]	-	From config: slider: {   ariaLabel: undefined }
biggerSliderFocus	Increases slider size on focus	boolean	-	false
customFormatter	Function to format the tooltip label for display	func	-
disabled	Slider will be disabled	boolean	-	false
format	Define v-model format	string	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
override	Override existing theme classes completely	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 }
v-model		number | number[]	-	0
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 Base

SASS Variable	Default
$slider-background	transparent
$slider-margin	1em 0
$slider-mark-size	0.75rem
$slider-font-size	$base-font-size
$slider-rounded-borded-radius	$base-rounded-border-radius
$slider-thumb-background	$white
$slider-thumb-border	1px solid $grey-light
$slider-thumb-radius	$base-border-radius
$slider-thumb-shadow	none
$slider-thumb-to-track-ratio	2
$slider-thumb-transform	scale(1.25)
$slider-tick-background	$primary
$slider-tick-radius	$base-border-radius
$slider-tick-to-track-ratio	0.5
$slider-tick-width	3px
$slider-track-background	$grey-lighter
$slider-fill-background	$primary
$slider-track-border-radius	$base-border-radius
$slider-track-border	0px solid $grey
$slider-track-disabled	0.5
$slider-track-radius	$base-border-radius
$slider-track-shadow	0px 0px 0px $grey

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$slider-background	transparent
$slider-margin	1em 0
$slider-mark-size	0.75rem
$slider-font-size	$base-font-size
$slider-rounded-borded-radius	$base-rounded-border-radius
$slider-thumb-background	$white
$slider-thumb-border	1px solid $grey-light
$slider-thumb-radius	$base-border-radius
$slider-thumb-shadow	none
$slider-thumb-to-track-ratio	2
$slider-thumb-transform	scale(1.25)
$slider-tick-background	$primary
$slider-tick-radius	$base-border-radius
$slider-tick-to-track-ratio	0.5
$slider-tick-width	3px
$slider-track-background	$grey-lighter
$slider-fill-background	$primary
$slider-track-border-radius	$base-border-radius
$slider-track-border	0px solid $grey
$slider-track-disabled	0.5
$slider-track-radius	$base-border-radius
$slider-track-shadow	0px 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 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