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

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="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-field expanded>
                <b-slider v-model="value" lazy></b-slider>
            </b-field>
            <b-field>
                <b-input v-model="value" type="number"></b-input>
            </b-field>
        </b-field>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                value: 20
            }
        }
    }
</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	—	`true`
`tooltip-type`	The 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 Sass	`type`
`rounded`	Rounded thumb	Boolean	—	`false`
`disabled`	Disable the slider	Boolean	—	`false`
`custom-formatter`	Function to format the tooltip label for display	Function	—	—
`aria-label`	Accessibility label for the thumbs	String, Array	—	—

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`	`$white`
`$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`

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

Improve this page on GitHub