Vaadin 14 slider?

Flow
1

Is there a Vaadin 14 component for a simple [edit: range]
slider?

i.e. without porting polymer or using “compatibility mode”?

I can’t find one, in which case when will one be available?

Or what are the disadvantages if any of using “compatibility mode”? (Assuming I can get an out-of-the-box slider with compatibility mode)

Thanks for reading!

2

Hi,

I’m not sure of what is a slider component for you. Is it a range slider ( like this one https://vaadin.com/directory/component/paper-range-slider or a carousel like that https://vaadin.com/directory/component/carousel-addon ?

The first one is running in compatibility mode but it should be easy to upgrade it in vaadin 14 because the polymer component already exists in polymer 3.

3

Hi,

A range slider.

So … I use Vaadin because I don’t keep up to date with polymer etc.

Given that, how would one go about porting to latest Vaadin 14?

Checkout, change the vaadin version, and go from there?

Also, where would the Polymer 3 version be?

ty.

4

I did a mistake and the range-slider component has not been upgraded to Polymer3. So the link for the component is not “easy” to migrate.

You can find an example of a simple slider here: https://vaadin.com/docs/v14/flow/binding-data/tutorial-flow-field.html

You can also add some properties (like max or pin)


@Tag("paper-slider")
@NpmPackage(value = "@polymer/paper-slider",
        version = "3.0.1")
@JsModule("@polymer/paper-slider/paper-slider.js")
public class PaperSlider
        extends AbstractSinglePropertyField<PaperSlider,
        Integer> {

    public PaperSlider() {
        super("value", 0, false);
    }

    public void setMax(int max) {
        this.getElement().setProperty("max", max);
    }
    public void setPin(boolean pin) {
        this.getElement().setProperty("pin", pin);
    }
}

But I don’t think there is already a Vaadin 14 component for that.

5

Boom! Works.

“Acid for blood …”

You’ve been extremely helpful, many thanks.
18216524.png

6

Perfect :slight_smile:

7

See this feature request which wraps <input type="range">: Add support for Slider · Issue #5720 · vaadin/flow-components · GitHub