I’m looking for a component for setting a range between 0-24h.
I would like the date range component’s behavior (movable and sizable rectangle but restricted into 0-24 hours)
If you take the date range component and change the Max Selection property to say “24 hours”, the rectangle can slide and can select smaller ranges, but can’t select a range larger than 24 hours. Is there some other behavior you want?
It’s ok for the size of the range, but I want to display only ticks from 0 to 24.
Doesn’t need displaying start - end date.
I would like to build a component for setting a resizable range between 0 - 24 inside a day, with no date consideration.
This is as close as I could get with the Date Range component. Expanding it a bit shows 00 on the right, not 24.
Yes Kathy, exactly what I need…
I suppose, this requires a bit of swing code ??,
Nothing quite so elegant as swing hacking. 
It’s the date range component with an opaque label over the top part. Set the max range to 24 hours and the initial range to 24 hours. I took advantage of the fact that you’re in the French locale, which makes it a 24 hour clock. You would need to strip out the day part of the info you get back, but that’s easy.
Set the max range to 24 hours and the initial range to 24 hours ???
Which Date Range property do you mean ?
Sorry, that’s what I get from going from memory. It’s Max Selection and Outer Range Start/End.
Ok,
but there remains a problem, when we drag the range on the right side or the left side, with the mouse and continue outside the date range, the limit are not respected and hours tick changes…
Any workaround for this case ?
I’m not getting that behavior with the settings I posted. Can you post a shot of the properties on your date range component?
How do you lock the slider in the 0-24h of the day choosen ?
If you click on the center of the slider and move it on the left side or right side, the ticks change 
Ah, I see what you mean now. When you said “drag the range on the right side or the left side”, I was dragging from the edges, not the middle.
Looks like that solution won’t work for you, then. If you don’t come up with one that works, you should post a request on http://ideas.inductiveautomation.com/
Here’s one for you, Lionel.
Added a few Custom properties and a Property Change script. Still scrools away, but snaps back after releasing the button.
time_clock_DateRange JC_2014-10-16_1448.proj (8.81 KB)
A component like this one would be perfect :
http://tillnagel.com/2012/06/animated-time-range-slider/
LINK doesnt work. Can i get this still?
For that particular one? Well… nope.
Not that I don’t want to, but you seem to have hit on one that I didn’t keep around. Very odd for a code pack-rat like myself.
But with the new functionality added via the system.date functions, you can make your very own.
Put this in the propertyChange event of the Date Range component.
if event.propertyName =='selectedDateRange':
startIn = event.source.startDate
endIn = event.source.endDate
#get date range
diff = system.date.secondsBetween(startIn, endIn)
# Use this instead if you want a full day (minus 1 second)
# diff = 86399
# Get midnight of startDate
midnight = system.date.midnight(startIn)
# Check to see if the startDate is already at midnight. Update if needed
if event.source.startDate != midnight:
event.source.startDate = midnight
event.source.endDate = system.date.addSeconds(midnight, diff)
This will snap the start date to 12:00am on the same day. The end date floats, so you can adjust it, or you can hard code a range.
Thank you.
I am looking to get it so a saved tag is the hard limit of the outer range start and then the end is anything after that to now. then i also want the range itself to be stuck at 22 hours and they can slide it through out that outer range.
I Will play around with your example and see what i can come up with. Thanks
Yupp, Looks like i just needed a swift kick in the right direction.
The code below is in the slider bar propertyChange Script.
It locks the outer range start/end as well as the size of the slider bar. works like a charm.
If there is a way to optimize this please let me know.
Thanks.
start = event.source.outerRangeStartDate
end = event.source.outerRangeEndDate
startTest = system.tag.read("TimeatStart").value
endTest = system.tag.read("TimeNow").value
if event.source.outerRangeStartDate != startTest:
event.source.outerRangeStartDate = startTest
if event.source.outerRangeEndDate != endTest:
event.source.outerRangeEndDate = endTest
start2 = event.source.startDate
if event.source.endDate != system.date.addHours(start2, 22):
event.source.endDate = system.date.addHours(start2, 22)