range-slider
A range-slider component for Vaadin 8
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 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.
- 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
Sample code
RangeSlider slider = new RangeSlider("cost-range", new Range(0, 200)); slider.setValue(new Range(50, 100)); slider.setStep(10); Binder<> binder = new Binder<Data>(); binder.forField(slider) .bind(Data::getCostRange, Data::setCostRange);
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
- Released
- 2023-03-07
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 8.0+
- Browser
- Internet Explorer
- Firefox
- Opera
- Safari
- Google Chrome
- Internet Explorer
- iOS Browser
- Android Browser
- Internet Explorer
- Internet Explorer
- Windows Phone
- Microsoft Edge
range-slider - Vaadin Add-on Directory
A range-slider component for Vaadin 8## 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
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.
* 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
```