RangeSlider Add-on for Vaadin 8

RangeSlider is a UI component add-on for Vaadin 8 that currently displays a slider with a lower and upper handle, to select a range of values. The Slider is based on Vaadins HasValue and can be used with a Binder.

This addon is based massivly on the great noUiSlider-javascript-component, see https://refreshless.com/nouislider/ or https://github.com/leongersen/noUiSlider/ for more infos.

Features

changing the step size between values
Setting the displayed decimal-precision for values.
changing the minimal and maximal difference allowed between the lower and upper value
Value-Tooltips can be displayed never, always, on-focus or on-change.
slider can be read-only.
slider integrates in the vaadin-8 binder

Known Limitations

Styling adapted to valo, other themes may require some tuning. See the range-slider.css for more infos.

Building and running demo

git clone git://github.com/daishy/range-slider.git mvn clean install cd range-slider-demo mvn spring-boot:run

To see the demo, navigate to http://localhost:8080/

Release

(More of a note for me ...)

vaadin-addons-release: mvn clean deploy -Pvaadin-release central-release: mvn clean deploy -Poss-release

License & Author

Add-on is distributed under Apache License 2.0. For license terms, see LICENSE.

Usage and Examples

Create a new field as you would any other vaadin-field-component via the provided constructors.

Binding field via a binder:

RangeSlider slider = new RangeSlider("cost-range", new Range(0.0, 200.0));

Binder<> binder = new Binder<Data>();
binder.forField(slider).bind(Data::getCostRange, Data::setCostRange);

Setting a minimal and maximal difference between the values:

RangeSlider slider = new RangeSlider("cost-range", new Range(0.0, 200.0));
slider.setMinimalDifference(10); // values must be at least 10 appart
slider.setMaximalDifference(50); // but no more than 50 appart

Setting the precision and step-size to allow decimal values:

RangeSlider slider = new RangeSlider("cost-range", new Range(0.0, 10.0));
slider.setStep(0); // Any steps are allowed
slider.setPrecision(2); // Show values as 2.24, 5.23 etc.

Set the allowed step-size:

RangeSlider slider = new RangeSlider("cost-range", new Range(0.0, 10.0));
slider.setStep(2); // only 0, 2, 4, 6, 8, 10 are selectable

Show Tooltips for the selected values:

RangeSlider slider = new RangeSlider("cost-range", new Range(0.0, 10.0));
slider.setTooltips(RangeSliderState.Tooltips.NEVER); // Never showing the selected values
slider.setTooltips(RangeSliderState.Tooltips.ON_CHANGE); // Show selected values if slider is moved
slider.setTooltips(RangeSliderState.Tooltips.ALWAYS); // Always show the selected values
slider.setTooltips(RangeSliderState.Tooltips.ON_FOCUS); // Show if component focused

aschemschat / range-slider

readme