Range Slider: What to use?

Flow
1

I’m looking for a range slider component with a single slider and a range slider (minimum and maximum range) similar to Paper-Range-Slider components - Vaadin Add-on Directory
However, according to the comments, this component isn’t working anymore. There are other components around which also seems to be outdated. I noticed that there is a new component available called RangeInput, but I couldn’t hardly find any documentation on that.

Can you recommended a working range slider component to me?

1 Like
2

Mmm wouldn’t it be a good idea to use a Slider and set a tooltip when the user clicks on it ?

It is very possible, I don’t see it crazy. css java and little else.

3

What do you mean by “Slider”? I don’t see that component here: Components | Vaadin Docs

4

Sorry my friend, you`re right

The addon is

<dependency>
       <groupId>org.vaadin.addons.componentfactory</groupId>
       <artifactId>lumo-paper-slider</artifactId>
       <version>1.0.1</version>
</dependency>

but you must be customize it, and maybe with Tooltip.forComponent

5

I don’t think there is an integration for Vaadin with a single and a range slider in Vaadin 24.

For a single slider, I think a a simple input range should be the way to go. <input type="range"> - HTML: HyperText Markup Language | MDN

The Vaadin component is RangeInput.

I think a good candidate for a range slider (minimum and maximum range) would be this component: GitHub - n3r4zzurr0/range-slider-input: A lightweight (~2kB) library to create range sliders that can capture a value or a range of values with one or two drag handles but there is no integration for Vaadin.

2 Likes
6

looks pretty good, It would be nice to have it in the Vaadin addons repo.

7

Just came here to say that I’m looking for the same thing. Spend a little while trying to set up the range slider that Jean suggested as a Vaadin component. Couldn’t figure it out. I’ll just use two Lumo Paper Slider until I can find something else.

8

Quick draft of a wrapper for the “J-C’s slider”:

I didn’t cut a release as I only tested that locally. If you Nathan find this valuable, please try a local snapshot build and I can then cut a release if it works for you.