Documentation

This site gathers documentation of my GitHub projects

Slider

Display classic slider more sexy, in different colors, sizes, and states

Colors Yes
Sizes 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">

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 ( event.target.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

This page is designed with Bulma CSS framework.