QRange how to use as date/time range selector with custom labels

[ssuess]

I would like to use the QRange component to allow the user to select from variable time ranges (with variable steps), using milliseconds timestamps as the values of my min and max values of the date range. If I am just using the values (ie “1556010639162”) I can make the slider work between two of them, but I can’t find a way to format those values for label display (ie “April 23, 11am”, even if the underlying number is milliseconds)…is this even possible?

[ssuess]

I am looking for something similar to this (https://refreshless.com/nouislider/examples/#section-dates), but would prefer to use the native QRange component if possible. Anyone have any suggestions?

[mKomo]

Hi,

see: https://jsfiddle.net/udweq862/

it needs some formatting but should be a start, you can take Date() object and format it as needed

[ssuess]

@mKomo Thanks!!

[ssuess]

@mKomo Thanks again, I have been playing around with it and it works pretty well, but ideally I would replace the labels on the slider handle circles themselves with the formatted date values. This seems like it might require a new feature request though, what do you think?

[mKomo]

Hi, you can use the left-label-value and right-label-value props , you can make a computed property and bind it to the label

See: https://jsfiddle.net/15c7qamu/3/

again the date needs some formatting but it should work

[ssuess]

Thanks SO much! I was misunderstanding the purpose of left label previously (thought it was about the entire range min, not the control label)