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

AJAX Header Update

Min 0Max 100

AJAX Value: 15

Client Side Custom Header Formatter

0100

15

Lower and Upper Bounds

0100

20 - 80

list.xhtml
Documentation

<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
NameDescriptionRequired
widgetVarWidget variable name, accessible via TW('widgetVar') and TornadoFaces.widgets.widgetVar. false
headerShow 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
labelFormatterName of a JavaScript function that will be called to format the header labels for min, max and value whenever the value changes. false
dataArbitrary data you can connect to your component, for example for retrieval by the configure tag or other custom business logic false
valueAlias for lowerfalse
lowerTargetClient id of input element that will be kept in sync with the lower track valuefalse
upperTargetClient id of input element that will be kept in sync with the upper track valuefalse
lowerThe position of the lower (or only) slidertrue
upperThe position of the upper (the optional, second) sliderfalse
rangeConfiguration for non-linear stepping. Must be set programmatically, prefereably via the configure tag. false
connectThe 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
marginWhen 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
limitThe 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
stepBy 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
orientationThe 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
directionBy 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
onSlideJavaScript callback on slider value changedfalse
animateSet the animate option to false to prevent the slider from animating to a new value with when calling .val(). false
renderedShould this component be rendered?false
throttleThrottle 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.