Slider

<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.