I had a need for a “Duration” field, and liked the idea of (instead of using a masked textbox or two dates (start and end)) using range sliders to increment the duration parts of the value.
Here’s how it’s built in the form designer.
A few notes about the form elements:
- Set the Initial Value of the “slider” TextBoxes to 0 (zero)
- Set the Control Id of each TextBox and then match your scripts
- Use an IncludeHTML component to define your CSS, if desired
Before we go over the code, note that formatted text in a javascript text creator field can break functionality, so the easiest way I’ve found to copy/paste javascript is to have a spare Notepad open to paste to first. Click to view:

I didn’t completely sanitize the code after extracting it from my production project, so there may be some extraneous code that can be stripped if desired. And here’s the code:
In the “Script” section of the form (javascript) –
function SetDuration() { var timeSpent = document.getElementById('InputTimeSpent'); var timeSpentDays = document.getElementById('InputTimeSpentDays'); var timeSpentHours = document.getElementById('InputTimeSpentHours'); var timeSpentMins = document.getElementById('InputTimeSpentMins'); timeSpent.value = timeSpentDays.value + 'd ' + timeSpentHours.value + 'h ' + timeSpentMins.value + 'm'; if (timeSpent.value == '0d 0h 0m') { timeSpent.value = timeSpent.placeholder; timeSpent.className = 'gaInputBoxRequired'; } else { timeSpent.className = 'gaInputBox aInputValid'; } }
In the Body onload event of the form (javascript)-
// declarations var timeSpent = document.getElementById('InputTimeSpent'); var timeSpentDays = document.getElementById('InputTimeSpentDays'); var timeSpentHours = document.getElementById('InputTimeSpentHours'); var timeSpentMins = document.getElementById('InputTimeSpentMins'); // create and value placeholder attributes for textboxes timeSpent.setAttribute('placeholder','Enter Time Spent'); // assign appropriate type and css class to Time Spent text boxes SetDuration(); timeSpent.readOnly = true; timeSpentDays.setAttribute('type', 'range'); timeSpentDays.setAttribute('min', '0'); timeSpentDays.setAttribute('max', '30'); timeSpentDays.setAttribute('oninput', 'SetDuration()'); timeSpentHours.setAttribute('type', 'range'); timeSpentHours.setAttribute('min', '0'); timeSpentHours.setAttribute('max', '23'); timeSpentHours.setAttribute('oninput', 'SetDuration()'); timeSpentMins.setAttribute('type', 'range'); timeSpentMins.setAttribute('min', '0'); timeSpentMins.setAttribute('max', '59'); timeSpentMins.setAttribute('oninput', 'SetDuration()');
And here is the CSS to accompany the className javascript adjustments. Remember in your IncludeHTML component to wrap the entire CSS block in style tags.
.gaInputBox { font-size: 12px; font-family: Verdana, Serif; padding-left: 3px; padding-bottom: 2px; background-color: #f7f7f7; color: #999999; -webkit-appearance: none; border-radius: 0; outline: none; } .gaInputBoxRequired { font-size: 12px; font-family: Verdana, Serif; padding-left: 3px; padding-bottom: 2px; background-color: #f7f7f7; color: #999999; -webkit-appearance: none; border-radius: 0; border-right: solid 2px #cd5c5c; outline: none; } .aInputValid { background-color: #ffffff !important; color: #525252 !important; } .gaInputTime { padding-bottom: 2px; background-color: #e6e6e6; -webkit-appearance: none; border-radius: 2px; outline: none; } .gaLabel { font-size: 12px; font-family: Verdana, Serif; text-align: left; padding-left: 4px; color: #525252; } .gaBlueButton { text-transform: uppercase; font-family: Verdana, Serif; font-size: 12px; letter-spacing: .5px; border: none; text-align: center; color: white; background-color: #569fbe; outline: none !important; padding-bottom: 2px; cursor: pointer; -webkit-appearance: none; border-radius: 6px; outline: none; -moz-transition: top 200ms ease-in-out; -o-transition: top 200ms ease-in-out; -webkit-transition: top 200ms ease-in-out; transition: top 200ms ease-in-out; }
Here’s the link to a demo package as well Check out the Demos page for a demo package of this concept; dissecting it will likely be much more helpful than this write-up.