range-slider: ## RangeSlider Component
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
noUiSlider - JavaScript Range Slider | Refreshless.com or GitHub - leongersen/noUiSlider: noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
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.
- The component must have a width defined (Percentage, Pixel, …) to properly calculate its total width
and the space for each step. It can’t expand on its own, so it would always be a width of 0! - A boundary-difference of 0 (e.g. 0 to 0, 2 to 2, etc) will result in the slider being displayed with a
width of 0 (so just two dots in the same place). The slider should resize when a new boundary is set.
Demo
To start the demo just checkout the project, run it with spring-boot and open http://localhost:8080:
git clone git://github.com/daishy/range-slider.git
mvn clean install
cd range-slider-demo
mvn spring-boot:run