NOT ISSUE - QUESTION: Simple slider & bind to list of existing values

[kuatroka]

It's a question or maybe a feature request.

Is there a way to make the RangeSlider, just a slider with only one point of selection along the track?

And the follow up - If the answer to the first question is yes, then is there a way to pass a list of values to the slider instead of min/max? The reason is the following: I got an array of quarters ['200Q1', '2016Q2', .....etc] and I want to use it in a slider with a bar chart for example. I would slide the slider and would select a quarter to show the data for. There is also a filter to choose an entity for which a different array of quarters will be used for the slider and the array is not always filled with consecutive quarters, some times some quarters are missing, so I can't have a min/max.

Is there a way to bind my own/custom array of values in my predefined order to this Single point Slider? Thanks.

[techniq]

Hey @kuatroka 👋

At the moment there is not a way to select a single value using RangeSlider, although I have a lot of plans for the component (see #54). RangeSlider is going to become MultiRangeInput, and a new RangeInput that supports a single value (and like using a native <input type="range"> (but styled) will be used). MultiRangeInput also needs some work TBH.

One thought you could do is use <input type="range"> with a <datalist>. I've experimented with this some (REPL), but it needs refined. See also MDN doc.

Also, I don't know if you've seen, but Range Slider Pips looks great (I haven't used it personally, but it looks really well polished).

A slightly different idea, instead of a range, you might want to consider MenuField with the stepper prop. I use it on the LayerChart in a few places, including here (see path/curve fields)

So in summary,

• It's not currently possible, but likely will be in the future
• You might want to trying using <input type="range"> with <datalist>
• or Range Slider Pips
• or a MenuField with stepper

[kuatroka]

Thanks @techniq . Your stepper is better than any slider for my use case. It's just brilliant! Thanks for the suggestion.

As for an example of the Slider component, I do already have a working one, but it's a very simple and primitive based on a standard HTML input functionality. If needed, I can share it. I was just looking at your highly polished library and thought that I might have simply missed the Slider. Your double/Range sliders are much more complicated than a standard Slider, so I assumed you do have it somewhere, only I wasn't looking in the right place.

[techniq]

@kuatroka Forgot to mention I do have RangeField but it's not in the docs yet as it needed more polish as well (see #54). It's used on a few of the Gooey examples to adjust the blur, as well as all over LayerChart such as the Arc examples. I want to style the <input>, support steps, and such, (and expose RangeInput when you don't need the Field container. Just letting you know it exists, but subject to some changes.

[kuatroka]

Got it, also very nice. Yes, the stepper function would be nice too there. With the options prop you made if very simple pass a custom list of values. Exactly what I need. Thanks a lot.