Slider

Display classic slider more sexy, in 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

You can display vertical slider by adding orient="vertical" attribute 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

You can display slider value by adding output DOM element after the slider and class has-output to the slider then use the following JavaScript implementation:

50

You can 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 update 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>
// Find output DOM associated to the DOM element passed as parameter
function findOutputForSlider( element ) {
var idVal = element.id;
outputs = document.getElementsByTagName( 'output' );
for( var i = 0; i < outputs.length; i++ ) {
if ( outputs[ i ].htmlFor == idVal )
return outputs[ i ];
}
}

function getSliderOutputPosition( slider ) {
// Update output position
var newPlace,
minValue;

var style = window.getComputedStyle( slider, null );
// Measure width of range input
sliderWidth = parseInt( style.getPropertyValue( 'width' ), 10 );

// Figure out placement percentage between left and right of input
if ( !slider.getAttribute( 'min' ) ) {
minValue = 0;
} else {
minValue = slider.getAttribute( 'min' );
}
var newPoint = ( slider.value - minValue ) / ( slider.getAttribute( 'max' ) - minValue );

// Prevent bubble from going beyond left or right (unsupported browsers)
if ( newPoint < 0 ) {
newPlace = 0;
} else if ( newPoint > 1 ) {
newPlace = sliderWidth;
} else {
newPlace = sliderWidth * newPoint;
}

return {
'position': newPlace + 'px'
}
}

document.addEventListener( 'DOMContentLoaded', function () {
// Get all document sliders
var sliders = document.querySelectorAll( 'input[type="range"].slider' );
[].forEach.call( sliders, function ( slider ) {
var output = findOutputForSlider( slider );
if ( output ) {
if ( slider.classList.contains( 'has-output-tooltip' ) ) {
// Get new output position
var newPosition = getSliderOutputPosition( slider );

// Set output position
output.style[ 'left' ] = newPosition.position;
}

// Add event listener to update output when slider value change
slider.addEventListener( 'input', function( event ) {
if ( event.target.classList.contains( 'has-output-tooltip' ) ) {
// Get new output position
var newPosition = getSliderOutputPosition( event.target );

// Set output position
output.style[ 'left' ] = newPosition.position;
}

// Update output with slider value
output.value = event.target.value;
} );
}
} );
} );

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-light
$slider-track-radius $radius
$slider-track-border 0px solid $grey
$slider-track-shadow 0px 0px 0px $grey
$slider-thumb-background $primary
$slider-thumb-radius $radius
$slider-thumb-border 1px solid $white-ter
$slider-thumb-shadow none
$slider-output-width 3rem
$slider-output-background $grey-dark
$slider-output-radius $radius