Lumo Paper Slider

A field component based on paper-slider with full API and Lumo styles for Vaadin 14 and newer

View larger

Close

This is a field component based on paper-slider with full Vaadin style field API and Lumo compatible styles for Vaadin 14. Includes theme variants for primary, error, success and secondary color schemes.

Tested to work with Vaadin 14 and 24.

Sponsored development

Major pieces of development of this add-on has been sponsored by customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Sample code

        slider1.setMin(1);
        slider1.setMax(10);
        slider1.setWidth("500px");
        slider1.addValueChangeListener(event -> {
            Notification.show("Answer: " + event.getValue());
        });

        slider2.setMin(0);
        slider2.setMax(100);
        slider2.setWidth("250px");
        slider2.setValue(0);
        slider2.addThemeVariants(PaperSliderVariant.LUMO_SECONDARY);
        slider2.addValueChangeListener(event -> {
            Notification.show("Value: " + event.getValue());
        });

        slider3.setMin(1);
        slider3.setMax(10);
        slider3.setWidth("500px");
        slider3.setValue(4);
        slider3.setEnabled(false);

        slider4.setMin(0);
        slider4.setMax(10);
        slider4.setWidth("500px");
        slider4.setValue(0);
        slider4.setReadOnly(true);

        slider5.setMin(0);
        slider5.setMax(100);
        slider5.setWidth("500px");
        slider5.setValue(13);
        slider5.setSecondaryProgress(62);
        slider5.setPinned(true);
        slider5.setSnaps(true);
        slider5.setMaxMarkers(10);

Links

• View on GitHub

Compatibility