Vuetify: Extend Slider to allow for Ranges and Custom Labels

[Todd-Werelius]

Allow one OR two selectors on the slider to create a range selector versus a value selector, allow custom labels along selection axis, and embedded labels in thumbs when dragging for UX purposes. Adding this ability would greatly extend the uses of the slider

What will it allow you to do that you can't do today?
Select a range of values vs. a single value, and extend the semantic meaning of the selection. This can be used to select a time range, day, date, month range, or any 'range' of values the developer chooses, and creates a more compact and useful UI component that imparts more meaning to the user.

How will it make current work-arounds straightforward?
To accomplish this currently would require two sliders for basic range selection, which would use up more screen space, and be less intuitive to the user. The example would not be possible though without this extention

Suggested API extensions

• Range true/false ... true = select a range or single value, false = single value only
• Embedded Label Function ... if user provided function present slider would pass value, function would return label,
• Discrete Labels true/false ... true then label the axis instead of embedding in the handle, only viable for discrete sliders, use values, or if user labeling function provided use return values from that.

Example

[crzyjcky]

@nekosaur Any progress on the range-slider feature? Thanks!

[nekosaur]

It has been scheduled for our 1.1 release https://next.vuetifyjs.com/getting-started/roadmap

[johnleider]

I tried to get it as close as possible to your mockup:

[johnleider]

Bonus karma screenshot:

[Bilguunkhan]

Hello, is there a way to move the two pins simultaneously? Basically, I'm trying to set initial min and max range values and then drag the slider with the set values.

[nekosaur]

That is not supported.

[johnleider]

@Bilguunkhan Please do not comment on closed issues. If you have a bug, please create a new issue, https://issues.vuetifyjs.com or seek help in our community, https://community.vuetifyjs.com