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 :model-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" :model-value="20">
            </b-slider>
        </b-field>

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

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

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

# Types

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

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

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

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

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

# Customization

0
<template>
    <section>
        <b-field label="Tooltip type">
            <b-slider v-model="sliderValue" :tooltip-type="sliderType"></b-slider>
        </b-field>

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

        <b-field label="Custom tooltip label">
            <b-slider :custom-formatter="val => val + '%'"></b-slider>
        </b-field>

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

<script>
    export default {
        data() {
            return {
                sliderValue: 0
            }
        },
        computed:{
            sliderType(){
                if (this.sliderValue > 25 && this.sliderValue < 75){
                    return "is-warning";
                } else if (this.sliderValue >= 75){
                    return "is-success";
                }
                return "is-danger";
            }
        }
    }
</script>

# 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]" :key="val">
                    <b-slider-tick :value="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>

# Lazy update

Use lazy to update v-model only when dragging is finished.

<template>
    <section>
        <b-field grouped>
            <b-input v-model="value" type="number"></b-input>
        </b-field>
        <b-field>
            <b-slider v-model="value" lazy></b-slider>
        </b-field>
    </section>
</template>

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

# Indicator

Use indicator to show v-model inside the thumb.

6,000
40%
<template>
    <section>
        <div class="block">
            <b-field label="Format and locale">
                <b-field>
                    <b-select v-model="format">
                        <option value="raw">Raw</option>
                        <option value="percent">Percent</option>
                    </b-select>
                </b-field>
                <b-field>
                    <b-select v-model="locale">
                        <option :value="undefined"></option>
                        <option value="de-DE">de-DE</option>
                        <option value="en-CA">en-CA</option>
                        <option value="en-GB">en-GB</option>
                        <option value="en-US">en-US</option>
                        <option value="es-ES">es-ES</option>
                        <option value="es-MX">es-MX</option>
                        <option value="fr-CA">fr-CA</option>
                        <option value="fr-FR">fr-FR</option>
                        <option value="it-IT">it-IT</option>
                        <option value="ja-JP">ja-JP</option>
                        <option value="pt-BR">pt-BR</option>
                        <option value="ru-RU">ru-RU</option>
                        <option value="zn-CN">zn-CN</option>
                    </b-select>
                </b-field>
            </b-field>
        </div>

        <b-field label="Simple indicator">
            <b-slider v-model="value1" indicator :tooltip="false" :max="10000" :format="format" :locale="locale"></b-slider>
        </b-field>
        <b-field label="Custom format (bypass locale)">
            <b-slider v-model="value2" :custom-formatter="(val) => val + '%'" :tooltip="false" indicator></b-slider>
        </b-field>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                format: "raw",
                locale: undefined, // Browser locale

                value1: 6000,
                value2: 40,
            }
        }
    }
</script>

# API

Slider

Name
Description
Type
Values
Default
v-modelBinding valueNumber, Array
minMinimum valueNumber0
maxMaximum valueNumber100
stepStep interval of ticksNumber1
typeType (color) of the slider, optionalStringis-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, optionalStringis-small, is-medium, is-large
ticksShow tick marksBooleanfalse
tooltipShow tooltip when thumb is being draggedBooleanfalse
indicatorShow v-model value inside thumbBooleantrue
tooltip-typeThe type (color) of the tooltip. Defaults to typeStringis-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 thumbBooleanfalse
disabledDisable the sliderBooleanfalse
custom-formatterFunction to format the tooltip label for displayFunction
formatWhich format should be used to display the value. The value will be displayed as-is if using raw. The percent using value, min and max will be calculated and displayed if using percentStringraw, percentraw
localeAccept a string with a BCP 47 language tag, or an array of such strings. See Unicode BCP 47 locale identifierString, Array of Stringundefined: default to browser locale.
aria-labelAccessibility label for the thumbsString, Array
bigger-slider-focusIncrease the clickable areaBooleanfalse
tooltip-alwaysTooltip displays alwaysBooleanfalse

SliderTick

Name
Description
Type
Values
Default
valueThe value that the tick representsNumber

# Variables

You can use these variables to customize this component.

Name
Default
$slider-radius$radius
$slider-track-background$grey-lighter
$slider-track-radius$radius
$slider-track-border0px solid $grey
$slider-track-shadow0px 0px 0px $grey
$slider-thumb-background$scheme-main
$slider-thumb-radius$radius
$slider-thumb-border1px solid $grey-light
$slider-thumb-shadownone
$slider-thumb-to-track-ratio2
$slider-tick-to-track-ratio0.5
$slider-tick-width3px
$slider-tick-radius$radius
$slider-tick-background$grey-light
$slider-mark-size0.75rem
$slider-colors$colors