Slider demo page

Demo page for bootstrap slider plugin, includes examples of various ways to use the slider component.

Controlling slider

The slider components can be controlled in various ways:

• Dragging
• Mousewheel on the slider
• Mousewheel on the original input
• Keyup/keydown while the focus is in original input
• Manually entering value (automatically validated & snapped)

See project page for documentation.

Basic example

Default settings are min=1, max=100, step=1

Markup

Short range

The slider snaps in proper increments

Markup

Negative range

Markup

Decimal range

without floating point issues

Markup

Explicitly specified decimals

Markup

Negative decimal range

Markup

Disabled

the slider automatically reads the disabled attribute of input

Markup

Multiple in same container

the slider automatically uses y axis if height > width. No need to specify yet another option.

Markup

Prevent default

e.preventDefault() called on the "slidestart"-event

Markup

Hidden input

hide the original input and report the value in some other way

Markup

Datetime input

hide the original input and interpret the numbers as date in custom slide event

Markup

Input inside a scrollable div

slider can be mousewheeled without affecting div scrollbar

Markup

RTL slider

Slider using right-to-left writing order

Markup

Markup

Markup listed below sliders doesn't include the control-group container due to .outerHTML inconsistency issues.

Markup is generated with:

$( ".markup-container" ).each( function(){

    $(this).closest(".row").find(".prettyprint").html(
        $.trim(
            $(this).html()
            .replace( /&/g, "&").replace( //g, ">" )
            .replace( /data-slider=/g, '<span class="hilite">data-slider</span>=' )
        )
    );
});