Slider

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

<template>
    <section>
        <b-field label="Simple">
            <b-slider v-model="value"></b-slider>
        </b-field>

        <b-field label="Disabled">
            <b-slider :value="30" disabled></b-slider>
        </b-field>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                value: 5
            }
        }
    }
</script>

# Sizes

<template>
    <section>
        <b-field label="Small">
            <b-slider size="is-small" :value="20">
            </b-slider>
        </b-field>

        <b-field label="Default">
            <b-slider :value="20">
            </b-slider>
        </b-field>

        <b-field label="Medium">
            <b-slider size="is-medium" :value="20">
            </b-slider>
        </b-field>

        <b-field label="Large">
            <b-slider size="is-large" :value="20">
            </b-slider>
        </b-field>
    </section>
</template>

# Types

<template>
    <section>
        <b-field label="Primary">
            <b-slider type="is-primary" :value="20"></b-slider>
        </b-field>

        <b-field label="Success">
            <b-slider type="is-success" :value="20"></b-slider>
        </b-field>

        <b-field label="Error">
            <b-slider type="is-danger" :value="20"></b-slider>
        </b-field>

        <b-field label="Info">
            <b-slider type="is-info" :value="20"></b-slider>
        </b-field>

        <b-field label="Warning">
            <b-slider type="is-warning" :value="20"></b-slider>
        </b-field>
    </section>
</template>

# Customization

<template>
    <section>
        <b-field label="Tooltip type">
            <b-slider tooltip-type="is-light"></b-slider>
        </b-field>

        <b-field label="Hide tooltip">
            <b-slider :tooltip="false"></b-slider>
        </b-field>

        <b-field label="Rounded thumb">
            <b-slider rounded></b-slider>
        </b-field>
    </section>
</template>

# Tick and label

Use Slider Tick component to add custom ticks and labels

3
5
8
Off
Low
High
Auto
<template>
    <section>
        <b-field label="Show ticks">
            <b-slider :min="1" :max="10" ticks></b-slider>
        </b-field>

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

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

# Range slider

Just bind the value to an Array.

<template>
    <section>
        <b-field>
            <b-slider v-model="numbers" :min="1" :max="15" :step="0.5" ticks>
            </b-slider>
        </b-field>

        <b-field>
            <b-slider v-model="numbers2" type="is-danger" :min="-2" :max="8" :step="2">
            </b-slider>
        </b-field>

    </section>
</template>

<script>
    export default {
        data() {
            return {
                numbers: [2, 5],
                numbers2: [2, 6]
            }
        }
    }
</script>

# API

Slider

Name
Description
Type
Values
Default
v-modelBinding value Number, Array
minMinimum value Number 0
maxMaximum value Number 100
stepStep interval of ticks Number 1
typeType (color) of the slider, optional String is-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sassis-primary
sizeThickness of the slider, optional String is-small, is-medium, is-large
ticksShow tick marks Boolean false
tooltipShow tooltip when thumb is being dragged Boolean true
tooltip-typeThe type (color) of the tootip. Defaults to type String is-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sasstype
roundedRounded thumb Boolean false
disabledDisable the slider Boolean false
aria-labelAccessibility label for the thumbs String, Array -

SliderTick

Name
Description
Type
Values
Default
valueThe value that the tick represents Number -

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub