I am all over web programming techniques that present both practical function and visual appeal. One of team is the AjaxControlToolkit’s slider. In this project, I needed to get user input in the form of percentage ranges that would represent exam profiency.
I needed user input that would be in the form of
Proficiency A: 0 – 25
Proficiency B: 26 – 50
Proficiency C: 51 – 75
Proficiency D: 76 – 100
I could have well used 8 text boxes (2 text boxes per proficiency) but that would force me to validate for a) valid numeric inputs b) valid ranges and would make my UI more noisy.
The ajax control toolkit slider enables me to achieve a cleaner UI and ease of function:
Under the hood, they’re just a couple a proficiency just contains 2 textboxes and an extender hooked to them.
<ajax:SliderExtender
ID="sliderA"
runat="server"
Length="200"
BehaviorID="sliderA"
TargetControlID="proficiency_A"
BoundControlID="proficiency_A_value"
Orientation="Horizontal"
EnableHandleAnimation="true" />
<asp:TextBox
ID="proficiency_A"
runat="server" />
<asp:TextBox
EnableTheming="false"
ID="proficiency_A_value"
runat="server"
ReadOnly="true" Width="30" />
Profiency_A represents the textbox that will be rendered as the slider and profiency_A_value will reflect the slider value. I’ve set the it to ReadOnly="true" to maintain smart usability. I created 3 more sets to reflect proficiencies B to D.
The slider effectively takes care of the user numeric input. User validation on the client-side is still the faster way of checking for the input.
//sliders
var tb_pro_A = eval("document.aspnetForm." + pro_A);
//or "document.getElementById(clientName)
var tb_pro_B = eval("document.aspnetForm." + pro_B);
var tb_pro_C = eval("document.aspnetForm." + pro_C);
var tb_pro_D = eval("document.aspnetForm." + pro_D);
if (parseInt(tb_pro_A.value) >= parseInt(tb_pro_B.value)) {
alert('Proficiency A cannot be greater than or equal to B.');
result = false;
}
else if (parseInt(tb_pro_B.value) >= parseInt(tb_pro_C.value)) {
alert('Proficiency B cannot be greater than or equal to C.');
result = false;
}
else if (parseInt(tb_pro_C.value) >= parseInt(tb_pro_D.value)) {
alert('Proficiency C cannot be greater than or equal to D.');
result = false;
}
else {
//success, continuing script
}