Slider

Display a classic slider with different colors, sizes, and states

Colors Yes
Sizes Yes
Javascript Yes
Variables Yes

<input class="slider is-fullwidth" step="1" min="0" max="100" value="50" type="range">

Colors #

<input class="slider is-fullwidth" step="1" min="0" max="100" value="50" type="range">

<input class="slider is-fullwidth is-success" step="1" min="0" max="100" value="50" type="range">

<input class="slider is-fullwidth is-warning" step="1" min="0" max="100" value="50" type="range">

<input class="slider is-fullwidth is-danger" step="1" min="0" max="100" value="50" type="range">

<input class="slider is-fullwidth is-info" step="1" min="0" max="100" value="50" type="range">

Sizes #

<input class="slider is-fullwidth is-small" step="1" min="0" max="100" value="50" type="range" disabled="disabled">

<input class="slider is-fullwidth is-small" step="1" min="0" max="100" value="50" type="range">

<input class="slider is-fullwidth" step="1" min="0" max="100" value="50" type="range">

<input class="slider is-fullwidth is-medium" step="1" min="0" max="100" value="50" type="range">

<input class="slider is-fullwidth is-large" step="1" min="0" max="100" value="50" type="range">

Styles

Circle

<input class="slider is-fullwidth is-small is-circle" step="1" min="0" max="100" value="50" type="range" disabled="disabled">

<input class="slider is-fullwidth is-small is-circle" step="1" min="0" max="100" value="50" type="range">

<input class="slider is-fullwidth is-success is-circle" step="1" min="0" max="100" value="50" type="range">

<input class="slider is-fullwidth is-medium is-warning is-circle" step="1" min="0" max="100" value="50" type="range">

<input class="slider is-fullwidth is-large is-danger is-circle" step="1" min="0" max="100" value="50" type="range">

Positions

vertical

Display a vertical slider by adding orient="vertical" to the range input.

<input class="slider is-fullwidth" step="1" min="0" max="100" value="50" type="range" orient="vertical">

States

Disabled

<input class="slider is-fullwidth" step="1" min="0" max="100" value="50" type="range" disabled="disabled">

Javascript #

Display value

Display the slider value by adding an output DOM element after the slider and the class has-output to the slider. Then use the following JavaScript implementation:

50

Display the output as a tooltip by changing the class has-output to has-output-tooltip and use the following JavaScript implementation:

50

Javascript

The extension comes with a JavaScript implementation which updates the output value associated to the slider.

<input id="sliderWithValue" class="slider has-output is-fullwidth" min="0" max="100" value="50" step="1" type="range">
<output for="sliderWithValue">50</output>
bulmaSlider.attach();

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$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-to-track-ratio 2
$slider-output-width 3rem
$slider-output-background $grey-dark
$slider-output-radius $radius