- Components
- Slider
Slider
Range Slider based on noUiSlider with support for two slider values and lots of options. Can be programatially configured via the TornadoFaces configure tag to keep your markup free from business logic. Header can be updated with custom client side formatting or via AJAX.
In addition to value change events, you can also bind the lower or upper track values to other input elements via lowerTarget
and upperTarget
<h4>AJAX Header Update</h4>
<t:slider binding="#{s}" min="0" max="100" step="5" throttle="200" lower="#{controller.value}">
<t:slider-header id="header" min="Min #{s.min}" value="AJAX Value: #{controller.value}" max="Max #{s.max}"/>
<f:ajax render="header"/>
</t:slider>
<h4>Client Side Custom Header Formatter</h4>
<script>
var mySliderFormatter = function(type, label, value, widget) {
if (type == 'value')
label.html(value + ' units');
else if (type == 'min')
label.html('Zip');
else if (type == 'max')
label.html('Lots');
}
</script>
<t:slider id="myslider" widgetVar="myslider" labelFormatter="mySliderFormatter" header="true" min="0" max="100" step="1" lower="15" connect="lower"/>
<h4>Lower and Upper Bounds</h4>
<t:slider header="true" min="0" max="100" step="10" lower="20" upper="80" connect="true"/>
Range Slider based on noUiSlider with support for two slider values and lots of options. Can be programatially configured via the TornadoFaces configure tag to keep your markup free from business logic. Header can be updated with custom client side formatting or via AJAX.
Info
Tag name | slider |
---|---|
Component type | io.tornadofaces.component.Slider |
Renderer type | io.tornadofaces.component.SliderRenderer |
Attributes
Name | Description | Required |
---|---|---|
widgetVar | Widget variable name, accessible via TW('widgetVar') and TornadoFaces.widgets.widgetVar. | false |
header | Show a header containing min, max and value labels above the slider. This is a simple alternative to adding the more advanced slider-header element as a child of the slider. Defaults to false.
| false |
labelFormatter | Name of a JavaScript function that will be called to format the header labels for min, max and value whenever the value changes. | false |
data | Arbitrary data you can connect to your component, for example for retrieval by the configure tag or other custom business logic | false |
value | Alias for lower | false |
lowerTarget | Client id of input element that will be kept in sync with the lower track value | false |
upperTarget | Client id of input element that will be kept in sync with the upper track value | false |
lower | The position of the lower (or only) slider | true |
upper | The position of the upper (the optional, second) slider | false |
range | Configuration for non-linear stepping. Must be set programmatically, prefereably via the configure tag. | false |
connect | The connect setting can be used to control the bar between the handles, or the edges of the slider. Use "lower" to connect to the lower side, or "upper" to connect to the upper side. Setting true sets the bar between the handles. | false |
margin | When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on standard linear sliders. | false |
limit | The limit option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the limit option can only be used on linear sliders. | false |
step | By default, the slider slides fluently. In order to make the handles jump between intervals, you can use this option. The step option is relative to the values provided to range. | false |
orientation | The orientation setting can be used to set the slider to "vertical" or "horizontal". Set dimensions! Vertical sliders don't assume a default height, so you'll need to set one. You can use any unit you want, including % or px. | false |
direction | By default the sliders are top-to-bottom and left-to-right, but you can change this using the direction option, which decides where the upper side of the slider is. | false |
onSlide | JavaScript callback on slider value changed | false |
animate | Set the animate option to false to prevent the slider from animating to a new value with when calling .val(). | false |
rendered | Should this component be rendered? | false |
throttle | Throttle calls to behaviours. A throttle enforces the supplied value as a maximum time allowed between calls to the behaviours. Use instead of delay on i.e. ajax-behaviours. | false |
Client Side formatting
You can format the min
, max
and value
labels in the header by referencing a JavaScript function in the labelFormatter
property.
This method will be called with the following arguments:
- type One of 'min', 'max' or 'value'
- label The corresponding span or h4 you must apply the value to
- value The value the label should now reflect. The value will be an array in case both lower and upper is used, or just an int if just lower is used.
- widget The slider widget. Can be used to extract or set further information about the labels.
Client Side Callbacks
onSlide
is called as a slider value changes.
function onSlide(slider, value) {
// The value will be an array if upper is used, int otherwise.
}
Ajax Behavior Events
change
will be called when a slider value is changed
<t:slider>
<f:ajax event="change" listener="#{controller.changed}">
</t:slider>
public void onChange(SliderValueEvent event) {
Slider slider = event.getSlider();
}
The listener will be called with an instance of io.tornadofaces.event.SliderEvent
that contains a reference to the slider.