Slider

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

View on Github

NPM Package 2.0.0

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:

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

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`