BootsFaces derives the Slider component from jQuery UI's widget, thus the b:slider
tag supports most of its options.
Caveat: Currently, we're developing a new component that doesn't need jQueryUI. In one of the next versions of BootsFaces
we'll either replace the implementation of <b:slider/>
by what we're currently calling <b:slider2 />
.
If that's not possible for compatibility reasons, we'll declare <b:slider />
deprecated and remove it in one of the
next versions of BootsFaces.
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.
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:
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.
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:
style
and style-class
apply to the entire slider.label-style
and label-style-class
apply to the optional label.badge-style
and badge-style-class
apply to the optional badge or to the optional input field.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.
If you are targeting Mobile, it can be useful to have a bigger handle.
You can control the handle size adding the handle-size
attribute, using the md
or lg
values for a Medium sized handle and a Large sized handle respectively.
Note: the same applies to Vertical Sliders.
The default handle has a rounded square shape.
If you prefer a round handle you can add the handle-shape="round"
attribute.
Note: the same applies to Vertical Sliders.
The attributes readonly
and disabled
can also be applied to sliders.
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"
.
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.
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.
If your application depends on the old HTML code, activate the context parameter net.bootsfaces.legacy_error_classes
in the web.xml.
Attribute | Default value | Description |
---|---|---|
auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
badge-span badgeSpan (alternative writing) |
1 | The column span of the badge or input field (if it's shown). |
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. |
handle-shape handleShape (alternative writing) |
(none) | The default handle is squared. Specifing the "round" value for this attribute will turn the handle shape to a circle. |
handle-size handleSize (alternative writing) |
(none) | In some situations (eg. mobile phones) the slider handle may be difficult to operate because of its size. Specifing the "md" or "lg" value for this attribute will change the handle size accordingly. |
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. |
max | 100 | The maximum value of the slider. (default 100) |
min | 0 | The minimum 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. |
orientation | (none) | Determines whether the slider handles move horizontally (min on left, max on right) or vertically (min on bottom, max on top). Possible values: "horizontal"(default), "vertical", "vertical-bottom". If vertical is specified, the Label is rendered on top, then the value and the slider on the bottom. If vertical-bottom is specified, the slider is rendered on top, then the value and the Label on the bottom. |
rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
span | 12 | The column span of the slider. |
step | 0 | The step of the slider. |
style | (none) | Inline style of the entire slider. |
style-class styleClass (alternative writing) |
(none) | Style class of the entire slider. |
tooltip | (none) | The text of the tooltip. |
tooltip-container tooltipContainer (alternative writing) |
body | Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body. |
tooltip-delay tooltipDelay (alternative writing) |
0 | The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
tooltip-delay-hide tooltipDelayHide (alternative writing) |
0 | The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
tooltip-delay-show tooltipDelayShow (alternative writing) |
0 | The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
tooltip-position tooltipPosition (alternative writing) |
(none) | Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom". |
value | (none) | Value. |
required
is true, the pseudo CSS class bf-required
is added. Thus you can define your custom style for required fields.
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.
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.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.bf-no-message
and has-success
. The latter colors the label green by default.