Vaadin Slider Element

General
1

Hi guys,

is there no compontent like a slider for V24+? Or do i search for the wrong component name?

image

2

As far as I know, there isn’t any official component.
There is this add-on from Vaadin: Lumo Paper Slider - Vaadin Add-on Directory
May this works with Vaadin 24 too.
Or you can integrate any React slider component yourself or look for other add-ons.

I tried once the Range Slider: Paper-Range-Slider components - Vaadin Add-on Directory, but it did not fit my case.

3

There is a Java implementation of the standard range input:

2 Likes
4

Strange that it is not in the vaadin documentation.

1 Like
5

PaperRange works very well too

6

There is no specific documentation for the html components (like Paragraph,…):

It could be a good enhancement

7

Would be good if it would be. Than the user knows that it exists.

1 Like
8

Does anyone has an idea of how i could have three “Steps” visible?

image

would like to habe step between

9

I’ve created a ticket here: Documentation is missing/hidden for the RangeInput component · Issue #3928 · vaadin/docs · GitHub

2 Likes
10

I think it would be helpful to add all Components to the documentation which are available

11

Feel free to add a comment or create a ticket on github.
It’s also written in the description of the ticket.

The documentation is missing/hidden for the RangeInput component and also for most of the components in the html package of Flow.

I tend to prefer to create small tickets that are easier to close than a big task.

3 Likes
12

The reason it’s not listed in the Components documentation is that it’s not really a proper Vaadin component but a Flow wrapper around the native HTML <input type="range"> element. That being said, it IS also missing from the list of those: https://vaadin.com/docs/latest/flow/create-ui/standard-html

(We’re also planning on moving that list to the Components part of the docs.)

13

Something like this?

Screenshot 2024-11-20 at 13.17.47
Screenshot 2024-11-20 at 13.17.472218Ă—414 18.2 KB

That seemed to be rather easy to add to my recent “demo addon”. It implements a functional slider, but its main purpose was to just promote Maven Central publishing. Forgot to add it to Vaadin Directory, it is now present there as well.

3 Likes
14

Hell yeah! Why is that a addon and not a default Vaadin component :D

15

Currently i am trying to use the Vaadin RangeInput. Is there an issue with setting the initial Value?

I have it like this:

  rangeInputInsurance.setMin(0.0);
  rangeInputInsurance.setMax(20.0);
  rangeInputInsurance.setStep(5.0);
  rangeInputInsurance.setValue(0.0);

The initial Starte is in the middle, shouldnt be it at start because i added 0 as min and setValue i set 0 as well.
image

OK yeah when i set -0 as initial Value, the dot moves to start. Dirty Trick =)

16

That’s a bug. Quite new component that most users propably haven’t discovered at all…

I created a bug report for this, go and thumb up it so we will get it fixed! Added a workaround to the add-on right away: Workaround for a Vaadin bug · mstahv/sliders@0fb69f0 · GitHub

2 Likes
17

@Matti is there a way to style the bar and the button?

I tried to

`input[type=“range”] {
background: linear-gradient(90deg, #4caf50 0%, #ffeb3b 50%, #f44336 100%);
height: 10px;
border-radius: 5px;
outline: none;
opacity: 0.9;
transition: opacity 0.2s;
}

input[type=“range”]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #2196f3;
border: 2px solid white;
border-radius: 50%;
cursor: pointer;
}`

in a vaadin-range-input-layout.css but it wont work

18

It should be possible because it is done for the add-on as well. I guess you found these CSS:s from the add-on?

-webkit-appearance: none; to wrong element in your trials🤔