Bootstrap Slider Since 1.0.0

This widget is going to replace the traditional <b:slider /> of BootsFaces. The old component is a jQueryUI widget. This dependency, in turn, causes many incompatibilities, so we searched for a slider component that doesn't use jQueryUI. The new <b:slider2 /> widget is based on http://seiyria.com/bootstrap-slider/ which is available at an MIT license.

You can use the attributes min, max, orientation and step.


There are three modes available that you can choose from with the mode attribute: basic, badge and edit.

In basic mode, only the slider and the label(if present) will be shown and the slider value will be hidden.

In badge mode, the default, the slider value will be shown in a badge. This is the default mode.

In edit mode, an editable input field showing the slider value will be shown; in this mode you can change the value by sliding or editing the value in the field.



Basic Mode

The most simple slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys(once you click on it).


Edit Mode

Use the edit mode when you want to allow the user to change the value editing it in an input field.

Notice how the slide handle positions itself as you type in the input box to reflect the current value and how the value in the input box changes when you slide.


Badge Mode

In this mode, the slider value will be shown in a badge.

84

Options and Examples

Horizontal sliders width

You can use the span attribute to control the width, in terms of Bootstrap's grid columns:

If you omit the span attribute, the component will take the full width of the parent container.


You can use more than one slider to get input for complex values, like the Time:

12
30

You can use the orientation attribute to obtain a vertical slider.

If you specify orientation="vertical", the Label is rendered on top, then the value and the slider on the bottom.

If orientation="vertical-bottom" is used, the slider is rendered on top, then the value and the Label on the bottom.

Value (0-100)

10
10

Value (0-100)

Styles and style-classes Breaking change in 1.1.0

Until version 1.0.2 of BootsFaces, the style and style-class attributes applied only the the optional badge.

Since 1.1.0, there are three separate pairs of options:

Value (0-100)

10
10

Value (0-100)

10

The Slider component has been developed so that it fits well both in forms and in Bootstrap Grid system.

This allows you to obtain complex input interfaces that adapt to all media screen sizes, taking advantage of the responsive features of the Grid system.

62

250

1K

4K

16K

Slider Handle options

Handle Size

If you are targeting Mobile, it can be useful to have a bigger handle.

You can control the handle size adding the handleShape attribute, using the md or lg values for a Medium sized handle and a Large sized handle respectively.

25
50
75

Note: the same applies to Vertical Sliders.

Handle Shape

The default handle has a rounded shape.

If you prefer a square or triangle handle you can add the handleShape="square" or handleShape="triangle" attribute.

25
75
50

Note: the same applies to Vertical Sliders.

Read only / disabled

The attributes readonly and disabled can also be applied to sliders.

Labels, required fields and error messages breaking change in 1.1.0

You can add a label by adding the attribute label. The label is also used by the JSF messages. To give you maximum flexibility, you can suppress automatic rendering of labels by adding renderLabel="false".

BootsFaces 1.0.2 and below:

Required inputs fields and their labels both bear the CSS class bf-required. By default, this adds an asterisk to the label.

If the field has a FacesMessage, one of the CSS classes bf-info, bf-warning, bf-error or bf-fatal, depending on which error severity the message has. The latter two classes color the label red.

If there's no message, the field and its label bear the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default.

BootsFaces 1.1.0:

bf-info, bf-warning, bf-error or bf-fatal have been dropped in favor of the standard Bootstrap CSS classes has-success, has-warning and has-error. Plus, they are applied to the form-group instead of the labels and input fields.

Compatibility settings

If your application depends on the old HTML code, activate the context parameter net.bootsfaces.legacy_error_classes in the web.xml.


Reference section

Attribute Default value Description
badge-style
badgeStyle (alternative writing)
(none) Inline style of the badge or input field (if it's shown).
badge-style-class
badgeStyleClass (alternative writing)
(none) Style class of the badge or input field (if it's shown).
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
disabled false If true, you can't move the slider, nor can you edit the number.
focus false Focus the appropriate slider handle after a value change.
formatter (none) Javascript function that returns the plain value to be displayed in the tooltip
handle-shape
handleShape (alternative writing)
round Handle shape. Accepts: 'round', 'square', 'triangle' or 'custom'
id (none) Unique identifier of the component in a namingContainer.
inline false Inline forms are more compact and put the label to the left hand side of the input field instead of putting it above the input field. Inline applies only to screens that are at least 768 pixels wide.
label (none) Label for the widget field.
label-style
labelStyle (alternative writing)
(none) The CSS inline style of the label.
label-style-class
labelStyleClass (alternative writing)
(none) The CSS class of the label.
labelled-by
labelledBy (alternative writing)
(none) Labels for the slider handle's, Use array for multiple values in a range slider.
max 100 The maximum value of the slider. (default 100)
min 0 The maximum value of the slider. (default 0)
mode badge Mode of the Slider Widget. There are three modes available : badge, edit and basic. In basic mode, only the slider and the label(if present) will be shown and the slider value will be hidden. In badge mode, the default, the slider value will be shown in a badge. In edit mode, an editable input field showing the slider value will be shown; in this mode you can change the value by sliding or editing the value in the field.
natural_arrow_keys false The natural order is used for the arrow keys. Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value.
orientation horizontal Set the orientation. Accepts 'vertical' or 'horizontal'
precision 0 The number of digits shown after the decimal. Defaults to the number of digits after the decimal of step value.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
reversed false Whether or not the slider should be reversed
scale linear Set to 'logarithmic' to use a logarithmic scale.
selection before Selection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles.
span 12 The column span of the slider.
step 1 Increment step
style (none) Inline style of the entire slider.
style-class
styleClass (alternative writing)
(none) Style class of the entire slider.
tooltip-slider-position
tooltipSliderPosition (alternative writing)
(none) Position of tooltip, relative to slider. Accepts 'top'/'bottom' for horizontal sliders and 'left'/'right' for vertically orientated sliders. Default positions are 'top' for horizontal and 'right' for vertical slider.
tooltip-split
tooltipSplit (alternative writing)
false If false show one tootip if true show two tooltips one for each handler.
tooltip-visibility
tooltipVisibility (alternative writing)
show Whether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always'.
value 5 Initial position of the slider.
  • If the attribute required is true, the pseudo CSS class bf-required is added. Thus you can define your custom style for required fields.
  • if theres a FacesMessage, the input field is bears one of the pseudo CSS classes bf-info, bf-warning, bf-error or bf-fatal. If there are no messages, the input field bears the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default.
  • If there's a label, it bears the CSS class required, if it's a mandatory field. This class adds an asterisk to the label text. You can override the CSS class to remove the asterisk or to replace it by something else.
  • If there's a label, it bears the CSS classes bf-info, bf-warning, bf-error or bf-fatal, depending on which error message the input field has. The latter two classes color the label red.
    If there's no message, the label bears the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default.