Slider

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

Simple

Disabled

<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

Small

Default

Medium

Large

<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

Primary

Success

Error

Info

Warning

<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

Tooltip type

Tooltip Always

Hide tooltip

Custom tooltip label

Rounded thumb

<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

Show ticks

Custom tick and label

Fan

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>

# 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.

Format and locale

Simple indicator

Custom format (bypass locale)

<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-model`	Binding value	Number, Array	—	—
`min`	Minimum value	Number	—	`0`
`max`	Maximum value	Number	—	`100`
`step`	Step interval of ticks	Number	—	`1`
`type`	Type (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 Sass	is-primary
`size`	Thickness of the slider, optional	String	`is-small`, `is-medium`, `is-large`	—
`ticks`	Show tick marks	Boolean	—	`false`
`tooltip`	Show tooltip when thumb is being dragged	Boolean	—	`false`
`indicator`	Show v-model value inside thumb	Boolean	—	`true`
`tooltip-type`	The type (color) of the tooltip. 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 Sass	`type`
`rounded`	Rounded thumb	Boolean	—	`false`
`disabled`	Disable the slider	Boolean	—	`false`
`custom-formatter`	Function to format the tooltip label for display	Function	—	—
`format`	Which 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 `percent`	String	`raw`, `percent`	`raw`
`locale`	Accept a string with a BCP 47 language tag, or an array of such strings. See Unicode BCP 47 locale identifier	String, Array of String	—	`undefined`: default to browser locale.
`aria-label`	Accessibility label for the thumbs	String, Array	—	—
`bigger-slider-focus`	Increase the clickable area	Boolean	—	`false`
`tooltip-always`	Tooltip displays always	Boolean	—	`false`

Slot name	Description	Props (if scoped)
default	Use SliderTick for custom ticks and labels

Name	Description	Parameters
`input`	Triggers when value is changed	`value: Number\|Array`
`change`	Triggers when value is changed after user interaction	`value: Number\|Array`
`dragstart`	Triggers when thumb is pressed	—
`dragend`	Triggers when thumb is released	—
`dragging`	Triggers when thumb is being dragged	`value: Number\|Array`

SliderTick

Name	Description	Type	Values	Default
`value`	The value that the tick represents	Number	—	—

Slot name	Description	Props (if scoped)
default	Label

# 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-border`	`0px solid $grey`
`$slider-track-shadow`	`0px 0px 0px $grey`
`$slider-thumb-background`	`$scheme-main`
`$slider-thumb-radius`	`$radius`
`$slider-thumb-border`	`1px solid $grey-light`
`$slider-thumb-shadow`	`none`
`$slider-thumb-to-track-ratio`	`2`
`$slider-tick-to-track-ratio`	`0.5`
`$slider-tick-width`	`3px`
`$slider-tick-radius`	`$radius`
`$slider-tick-background`	`$grey-light`
`$slider-mark-size`	`0.75rem`
`$slider-colors`	`$colors`

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

Improve this page on GitHub