Directory

← Back

range-slider

A range-slider component for Vaadin 8

Author

Rating

Popularity

100+

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);

Compatibility

(Loading compatibility data...)

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 range-slider - Vaadin Add-on Directory
## 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 ```
Online