Input Range Sliders

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.

sliders

Here’s how it’s built in the form designer.

2014-11-25_15-36-41

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:

Symantec Workflow Javascript Field
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.


Further Reading

Using Javascript in Workflow

Using CSS in Workflow

Javascript Input Types


Featured Components

TextBox

IncludeHTML

Label


compatible_ie2020compatible_firefox2020compatible_chrome2020compatible_safari2020compatible_opera2020

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s