A Strongly-Typed Range Input for .NET and MVC 2

The jquery TOOLS library has a nice API for creating HTML5 range inputs in older browsers. And the MVC 2 framework for ASP.NET offers a nice way of creating interactive web applications for Windows servers. The logical thing to do, then, is combine them somehow.First we'll create custom .NET attrib

A Technical Blog article. View original blog here.[^]

First we'll create custom .NET attribute called StepSize that we can attach to a model property. This attribute will be used to determine the step attribute of our range input. We'll use the existing .NET Range property attribute to determine the min and max values of our range input.

Next, we need some HtmlHelper extension methods to create the range input on our views. We'll create a strongly-typed version of this method and use reflection to traverse the model's property for which we're building the range input. These methods return an MvcHtmlString which means all the contents have been encoded and are ready to be displayed.

Once all that compiles, we can simply write the following line in our view to get a nice range input (which can be styled with CSS.)

<%= Html.RangeInputFor(model => model.SomeProperty) %>

Of course, you'll need to make sure your jquery TOOLS functions are set up correctly. I'm just using this simple call in my $(document).ready() function:

$(":range").rangeinput();

As always, check the code before you use it. I don't guarantee that these methods won't allow Satan himself to spawn in your web page and ruin the internet.

CodeProject

<span style="color: rgb(6, 0, 255); font-weight: bold; ">namespace</span> YourNamespace
<span style="color: rgb(0, 128, 0); ">{</span>
    <span style="color: rgb(0, 128, 0); ">[</span>AttributeUsage<span style="color: rgb(0, 128, 0); ">(</span>
        AttributeTargets<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Property</span>,
        AllowMultiple <span style="color: rgb(0, 128, 0); ">=</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">false</span>
    <span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">]</span>
    <span style="color: rgb(6, 0, 255); font-weight: bold; ">public</span> <span style="color: rgb(102, 102, 204); font-weight: bold; ">class</span> StepSizeAttribute <span style="color: rgb(0, 128, 0); ">:</span> Attribute
    <span style="color: rgb(0, 128, 0); ">{</span>
        <span style="color: rgb(6, 0, 255); font-weight: bold; ">public</span> <span style="color: rgb(102, 102, 204); font-weight: bold; ">object</span> StepSize <span style="color: rgb(0, 128, 0); ">{</span> get<span style="color: rgb(0, 128, 0); ">;</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">private</span> set<span style="color: rgb(0, 128, 0); ">;</span> <span style="color: rgb(0, 128, 0); ">}</span>
 
        <span style="color: rgb(6, 0, 255); font-weight: bold; ">private</span> StepSizeAttribute<span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">object</span> stepSize<span style="color: rgb(0, 128, 0); ">)</span>
        <span style="color: rgb(0, 128, 0); ">{</span>
            <span style="color: rgb(6, 0, 255); font-weight: bold; ">this</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">StepSize</span> <span style="color: rgb(0, 128, 0); ">=</span> stepSize<span style="color: rgb(0, 128, 0); ">;</span>
        <span style="color: rgb(0, 128, 0); ">}</span>
 
        <span style="color: rgb(6, 0, 255); font-weight: bold; ">public</span> StepSizeAttribute<span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">int</span> stepSize<span style="color: rgb(0, 128, 0); ">)</span>
            <span style="color: rgb(0, 128, 0); ">:</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">this</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">object</span><span style="color: rgb(0, 128, 0); ">)</span>stepSize<span style="color: rgb(0, 128, 0); ">)</span> <span style="color: rgb(0, 128, 0); ">{</span> <span style="color: rgb(0, 128, 0); ">}</span>
 
        <span style="color: rgb(6, 0, 255); font-weight: bold; ">public</span> StepSizeAttribute<span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">double</span> stepSize<span style="color: rgb(0, 128, 0); ">)</span>
            <span style="color: rgb(0, 128, 0); ">:</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">this</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">object</span><span style="color: rgb(0, 128, 0); ">)</span>stepSize<span style="color: rgb(0, 128, 0); ">)</span> <span style="color: rgb(0, 128, 0); ">{</span> <span style="color: rgb(0, 128, 0); ">}</span>
 
        <span style="color: rgb(6, 0, 255); font-weight: bold; ">public</span> StepSizeAttribute<span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">float</span> stepSize<span style="color: rgb(0, 128, 0); ">)</span>
            <span style="color: rgb(0, 128, 0); ">:</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">this</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">object</span><span style="color: rgb(0, 128, 0); ">)</span>stepSize<span style="color: rgb(0, 128, 0); ">)</span> <span style="color: rgb(0, 128, 0); ">{</span> <span style="color: rgb(0, 128, 0); ">}</span>
 
        <span style="color: rgb(6, 0, 255); font-weight: bold; ">public</span> StepSizeAttribute<span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">decimal</span> stepSize<span style="color: rgb(0, 128, 0); ">)</span>
            <span style="color: rgb(0, 128, 0); ">:</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">this</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">object</span><span style="color: rgb(0, 128, 0); ">)</span>stepSize<span style="color: rgb(0, 128, 0); ">)</span> <span style="color: rgb(0, 128, 0); ">{</span> <span style="color: rgb(0, 128, 0); ">}</span>
    <span style="color: rgb(0, 128, 0); ">}</span>
<span style="color: rgb(0, 128, 0); ">}</span>

<span style="color: rgb(6, 0, 255); font-weight: bold; ">using</span> <span style="color: rgb(0, 128, 128); ">System</span><span style="color: rgb(0, 128, 0); ">;</span>
<span style="color: rgb(6, 0, 255); font-weight: bold; ">using</span> <span style="color: rgb(0, 128, 128); ">System.Collections.Generic</span><span style="color: rgb(0, 128, 0); ">;</span>
<span style="color: rgb(6, 0, 255); font-weight: bold; ">using</span> <span style="color: rgb(0, 128, 128); ">System.Linq</span><span style="color: rgb(0, 128, 0); ">;</span>
<span style="color: rgb(6, 0, 255); font-weight: bold; ">using</span> <span style="color: rgb(0, 128, 128); ">System.Linq.Expressions</span><span style="color: rgb(0, 128, 0); ">;</span>
<span style="color: rgb(6, 0, 255); font-weight: bold; ">using</span> <span style="color: rgb(0, 128, 128); ">System.Text</span><span style="color: rgb(0, 128, 0); ">;</span>
<span style="color: rgb(6, 0, 255); font-weight: bold; ">using</span> <span style="color: rgb(0, 128, 128); ">System.Web.Mvc</span><span style="color: rgb(0, 128, 0); ">;</span>
<span style="color: rgb(6, 0, 255); font-weight: bold; ">using</span> <span style="color: rgb(0, 128, 128); ">System.ComponentModel.DataAnnotations</span><span style="color: rgb(0, 128, 0); ">;</span>
 
<span style="color: rgb(6, 0, 255); font-weight: bold; ">namespace</span> YourNamespace
<span style="color: rgb(0, 128, 0); ">{</span>
    <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <summary></span>
    <span style="color: rgb(0, 128, 128); font-style: italic; ">/// HtmlHelper extension methods for working with models in MVC2 views.</span>
    <span style="color: rgb(0, 128, 128); font-style: italic; ">/// </summary></span>
    <span style="color: rgb(6, 0, 255); font-weight: bold; ">public</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">static</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">partial</span> <span style="color: rgb(102, 102, 204); font-weight: bold; ">class</span> HtmlHelperExt
    <span style="color: rgb(0, 128, 0); ">{</span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <summary></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// Creates a range input that will display correctly on browsers that implement HTML5 or</span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// upon inclusion of the jquery TOOLS library.</span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// </summary></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <param name="htmlHelper">The HtmlHelper object that this method extends.</param></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <param name="name">The name of the range input. This will also be used for the id of the input.</param></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <param name="min">The minimum value of the range input.</param></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <param name="max">The maximum value of the range input.</param></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <param name="value">The default value of the range input.</param></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <param name="step">The step size of the range input.</param></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <param name="htmlAttributes">Additional attributes that should be included in the range input (i.e. class, etc.).</param></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <returns>An encoded range input string.</returns></span>
        <span style="color: rgb(6, 0, 255); font-weight: bold; ">public</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">static</span> MvcHtmlString RangeInput<span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(6, 0, 255); font-weight: bold; ">this</span> HtmlHelper htmlHelper, <span style="color: rgb(102, 102, 204); font-weight: bold; ">string</span> name, <span style="color: rgb(102, 102, 204); font-weight: bold; ">double</span> min, <span style="color: rgb(102, 102, 204); font-weight: bold; ">double</span> max, <span style="color: rgb(102, 102, 204); font-weight: bold; ">double</span> value, <span style="color: rgb(102, 102, 204); font-weight: bold; ">double</span> step, <span style="color: rgb(102, 102, 204); font-weight: bold; ">object</span> htmlAttributes<span style="color: rgb(0, 128, 0); ">)</span>
        <span style="color: rgb(0, 128, 0); ">{</span>
            var range <span style="color: rgb(0, 128, 0); ">=</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: rgb(0, 128, 0); ">new</span></a> TagBuilder<span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"input"</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Attributes</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Add</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"type"</span>, <span style="color: rgb(102, 102, 102); ">"range"</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Attributes</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Add</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"min"</span>, htmlHelper<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Encode</span><span style="color: rgb(0, 128, 0); ">(</span>min<span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Attributes</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Add</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"max"</span>, htmlHelper<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Encode</span><span style="color: rgb(0, 128, 0); ">(</span>max<span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Attributes</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Add</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"value"</span>, htmlHelper<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Encode</span><span style="color: rgb(0, 128, 0); ">(</span>value<span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Attributes</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Add</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"step"</span>, htmlHelper<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Encode</span><span style="color: rgb(0, 128, 0); ">(</span>step<span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Attributes</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Add</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"id"</span>, htmlHelper<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Encode</span><span style="color: rgb(0, 128, 0); ">(</span>name<span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Attributes</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Add</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"name"</span>, htmlHelper<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Encode</span><span style="color: rgb(0, 128, 0); ">(</span>name<span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            <span style="color: rgb(6, 0, 255); font-weight: bold; ">if</span> <span style="color: rgb(0, 128, 0); ">(</span>htmlAttributes <span style="color: rgb(0, 128, 0); ">!=</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">null</span><span style="color: rgb(0, 128, 0); ">)</span>
                range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">MergeAttributes</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">(</span>IDictionary<span style="color: rgb(0, 128, 0); "><</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">string</span>, <span style="color: rgb(102, 102, 204); font-weight: bold; ">object</span><span style="color: rgb(0, 128, 0); ">></span><span style="color: rgb(0, 128, 0); ">)</span>htmlAttributes, <span style="color: rgb(6, 0, 255); font-weight: bold; ">true</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            <span style="color: rgb(6, 0, 255); font-weight: bold; ">return</span> MvcHtmlString<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Create</span><span style="color: rgb(0, 128, 0); ">(</span>range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">ToString</span><span style="color: rgb(0, 128, 0); ">(</span>TagRenderMode<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">SelfClosing</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
        <span style="color: rgb(0, 128, 0); ">}</span>
 
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <summary></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// Creates a range input that will display correctly on browsers that implement HTML5 or</span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// upon inclusion of the jquery TOOLS library.</span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// </summary></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <typeparam name="TModel">The model type for which to create the range input.</typeparam></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <typeparam name="TProperty">The property type for which to create the range input.</typeparam></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <param name="htmlHelper">The HtmlHelper object that this method extends.</param></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <param name="expression">The LINQ expression that identifies the model and property for which to create this range input.</param></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <returns>An encoded range input string.</returns></span>
        <span style="color: rgb(6, 0, 255); font-weight: bold; ">public</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">static</span> MvcHtmlString RangeInputFor<span style="color: rgb(0, 128, 0); "><</span>TModel, TProperty<span style="color: rgb(0, 128, 0); ">></span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(6, 0, 255); font-weight: bold; ">this</span> HtmlHelper<span style="color: rgb(0, 128, 0); "><</span>TModel<span style="color: rgb(0, 128, 0); ">></span> htmlHelper, Expression<span style="color: rgb(0, 128, 0); "><</span>Func<span style="color: rgb(0, 128, 0); "><</span>TModel, TProperty<span style="color: rgb(0, 128, 0); ">>></span> expression<span style="color: rgb(0, 128, 0); ">)</span>
            <span style="color: rgb(6, 0, 255); font-weight: bold; ">where</span> TModel <span style="color: rgb(0, 128, 0); ">:</span> <span style="color: rgb(102, 102, 204); font-weight: bold; ">class</span>
        <span style="color: rgb(0, 128, 0); ">{</span>
            <span style="color: rgb(6, 0, 255); font-weight: bold; ">return</span> RangeInputFor<span style="color: rgb(0, 128, 0); ">(</span>htmlHelper, expression, <span style="color: rgb(6, 0, 255); font-weight: bold; ">null</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
        <span style="color: rgb(0, 128, 0); ">}</span>
 
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <summary></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// Creates a range input that will display correctly on browsers that implement HTML5 or</span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// upon inclusion of the jquery TOOLS library.</span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// </summary></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <typeparam name="TModel">The model type for which to create the range input.</typeparam></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <typeparam name="TProperty">The property type for which to create the range input.</typeparam></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <param name="htmlHelper">The HtmlHelper object that this method extends.</param></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <param name="expression">The LINQ expression that identifies the model and property for which to create this range input.</param></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <param name="htmlAttributes">Additional attributes that should be included in the range input (i.e. class, etc.).</param></span>
        <span style="color: rgb(0, 128, 128); font-style: italic; ">/// <returns>An encoded range input string.</returns></span>
        <span style="color: rgb(6, 0, 255); font-weight: bold; ">public</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">static</span> MvcHtmlString RangeInputFor<span style="color: rgb(0, 128, 0); "><</span>TModel, TProperty<span style="color: rgb(0, 128, 0); ">></span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(6, 0, 255); font-weight: bold; ">this</span> HtmlHelper<span style="color: rgb(0, 128, 0); "><</span>TModel<span style="color: rgb(0, 128, 0); ">></span> htmlHelper, Expression<span style="color: rgb(0, 128, 0); "><</span>Func<span style="color: rgb(0, 128, 0); "><</span>TModel, TProperty<span style="color: rgb(0, 128, 0); ">>></span> expression, <span style="color: rgb(102, 102, 204); font-weight: bold; ">object</span> htmlAttributes<span style="color: rgb(0, 128, 0); ">)</span>
            <span style="color: rgb(6, 0, 255); font-weight: bold; ">where</span> TModel <span style="color: rgb(0, 128, 0); ">:</span> <span style="color: rgb(102, 102, 204); font-weight: bold; ">class</span>
        <span style="color: rgb(0, 128, 0); ">{</span>
            <span style="color: rgb(0, 128, 128); font-style: italic; ">// use the expression to get a Range attribute from the property for which</span>
            <span style="color: rgb(0, 128, 128); font-style: italic; ">// we're creating this range input.</span>
            var mexp <span style="color: rgb(0, 128, 0); ">=</span> expression<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Body</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">as</span> MemberExpression<span style="color: rgb(0, 128, 0); ">;</span>
            var range <span style="color: rgb(0, 128, 0); ">=</span> mexp<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Member</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">GetCustomAttributes</span><span style="color: rgb(0, 128, 0); ">(</span><a href="http://www.google.com/search?q=typeof+msdn.microsoft.com"><span style="color: rgb(0, 128, 0); ">typeof</span></a><span style="color: rgb(0, 128, 0); ">(</span>RangeAttribute<span style="color: rgb(0, 128, 0); ">)</span>, <span style="color: rgb(6, 0, 255); font-weight: bold; ">false</span><span style="color: rgb(0, 128, 0); ">)</span>
                <span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">OfType</span><span style="color: rgb(0, 128, 0); "><</span>RangeAttribute<span style="color: rgb(0, 128, 0); ">></span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">FirstOrDefault</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
 
            <span style="color: rgb(0, 128, 128); font-style: italic; ">// if no range was found, then we're not creating this input; i.e. you need</span>
            <span style="color: rgb(0, 128, 128); font-style: italic; ">// a range attribute for this method.</span>
            <span style="color: rgb(6, 0, 255); font-weight: bold; ">if</span> <span style="color: rgb(0, 128, 0); ">(</span>range <span style="color: rgb(0, 128, 0); ">==</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">null</span><span style="color: rgb(0, 128, 0); ">)</span>
                <span style="color: rgb(6, 0, 255); font-weight: bold; ">throw</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: rgb(0, 128, 0); ">new</span></a> ArgumentException<span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"The property "</span> <span style="color: rgb(0, 128, 0); ">+</span> mexp<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Member</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Name</span> <span style="color: rgb(0, 128, 0); ">+</span> <span style="color: rgb(102, 102, 102); ">" does not have a range attribute."</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
 
            <span style="color: rgb(0, 128, 128); font-style: italic; ">// we need numeric values for the min and max values. Try to get them here.</span>
            var min <span style="color: rgb(0, 128, 0); ">=</span> 0m<span style="color: rgb(0, 128, 0); ">;</span>
            var max <span style="color: rgb(0, 128, 0); ">=</span> 0m<span style="color: rgb(0, 128, 0); ">;</span>
            <span style="color: rgb(6, 0, 255); font-weight: bold; ">if</span> <span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">!</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">Decimal</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">TryParse</span><span style="color: rgb(0, 128, 0); ">(</span>range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Minimum</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">ToString</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">)</span>, <span style="color: rgb(6, 0, 255); font-weight: bold; ">out</span> min<span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">)</span>
                <span style="color: rgb(6, 0, 255); font-weight: bold; ">throw</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: rgb(0, 128, 0); ">new</span></a> InvalidCastException<span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"The minimum value of the range attribute ("</span> <span style="color: rgb(0, 128, 0); ">+</span> range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Minimum</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">ToString</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">)</span> <span style="color: rgb(0, 128, 0); ">+</span> <span style="color: rgb(102, 102, 102); ">") for "</span> <span style="color: rgb(0, 128, 0); ">+</span> mexp<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Member</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Name</span> <span style="color: rgb(0, 128, 0); ">+</span> <span style="color: rgb(102, 102, 102); ">" cannot be converted to numeric."</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            <span style="color: rgb(6, 0, 255); font-weight: bold; ">if</span> <span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">!</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">Decimal</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">TryParse</span><span style="color: rgb(0, 128, 0); ">(</span>range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Maximum</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">ToString</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">)</span>, <span style="color: rgb(6, 0, 255); font-weight: bold; ">out</span> max<span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">)</span>
                <span style="color: rgb(6, 0, 255); font-weight: bold; ">throw</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: rgb(0, 128, 0); ">new</span></a> InvalidCastException<span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"The maximum value of the range attribute ("</span> <span style="color: rgb(0, 128, 0); ">+</span> range<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Maximum</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">ToString</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">)</span> <span style="color: rgb(0, 128, 0); ">+</span> <span style="color: rgb(102, 102, 102); ">") for "</span> <span style="color: rgb(0, 128, 0); ">+</span> mexp<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Member</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Name</span> <span style="color: rgb(0, 128, 0); ">+</span> <span style="color: rgb(102, 102, 102); ">" cannot be converted to numeric."</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
 
            <span style="color: rgb(0, 128, 128); font-style: italic; ">// we need the value of the property for this model so we can default the</span>
            <span style="color: rgb(0, 128, 128); font-style: italic; ">// range input to this position. This value needs to be numeric, too.</span>
            var value <span style="color: rgb(0, 128, 0); ">=</span> 0m<span style="color: rgb(0, 128, 0); ">;</span>
            var strValue <span style="color: rgb(0, 128, 0); ">=</span> <a href="http://www.google.com/search?q=typeof+msdn.microsoft.com"><span style="color: rgb(0, 128, 0); ">typeof</span></a><span style="color: rgb(0, 128, 0); ">(</span>TModel<span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">GetProperty</span><span style="color: rgb(0, 128, 0); ">(</span>mexp<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Member</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Name</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">GetValue</span><span style="color: rgb(0, 128, 0); ">(</span>htmlHelper<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">ViewData</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Model</span>, <span style="color: rgb(6, 0, 255); font-weight: bold; ">null</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">ToString</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            <span style="color: rgb(6, 0, 255); font-weight: bold; ">if</span> <span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">!</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">Decimal</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">TryParse</span><span style="color: rgb(0, 128, 0); ">(</span>strValue, <span style="color: rgb(6, 0, 255); font-weight: bold; ">out</span> value<span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">)</span>
                <span style="color: rgb(6, 0, 255); font-weight: bold; ">throw</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: rgb(0, 128, 0); ">new</span></a> InvalidCastException<span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"The value of "</span> <span style="color: rgb(0, 128, 0); ">+</span> mexp<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Member</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Name</span> <span style="color: rgb(0, 128, 0); ">+</span> <span style="color: rgb(102, 102, 102); ">" cannot be converted to numeric."</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
 
            <span style="color: rgb(0, 128, 128); font-style: italic; ">// now, get the step size attribute. This is a custom attribute defined in this</span>
            <span style="color: rgb(0, 128, 128); font-style: italic; ">// namespace, and the value will default to 1 if the attribute it isn't present.</span>
            var step <span style="color: rgb(0, 128, 0); ">=</span> 1m<span style="color: rgb(0, 128, 0); ">;</span>
            var stepSize <span style="color: rgb(0, 128, 0); ">=</span> mexp<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Member</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">GetCustomAttributes</span><span style="color: rgb(0, 128, 0); ">(</span><a href="http://www.google.com/search?q=typeof+msdn.microsoft.com"><span style="color: rgb(0, 128, 0); ">typeof</span></a><span style="color: rgb(0, 128, 0); ">(</span>StepSizeAttribute<span style="color: rgb(0, 128, 0); ">)</span>, <span style="color: rgb(6, 0, 255); font-weight: bold; ">false</span><span style="color: rgb(0, 128, 0); ">)</span>
                <span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">OfType</span><span style="color: rgb(0, 128, 0); "><</span>StepSizeAttribute<span style="color: rgb(0, 128, 0); ">></span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">FirstOrDefault</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            <span style="color: rgb(6, 0, 255); font-weight: bold; ">if</span> <span style="color: rgb(0, 128, 0); ">(</span>stepSize <span style="color: rgb(0, 128, 0); ">!=</span> <span style="color: rgb(6, 0, 255); font-weight: bold; ">null</span><span style="color: rgb(0, 128, 0); ">)</span>
                <span style="color: rgb(6, 0, 255); font-weight: bold; ">if</span> <span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">!</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">Decimal</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">TryParse</span><span style="color: rgb(0, 128, 0); ">(</span>stepSize<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">StepSize</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">ToString</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">)</span>, <span style="color: rgb(6, 0, 255); font-weight: bold; ">out</span> step<span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">)</span>
                    <span style="color: rgb(6, 0, 255); font-weight: bold; ">throw</span> <a href="http://www.google.com/search?q=new+msdn.microsoft.com"><span style="color: rgb(0, 128, 0); ">new</span></a> InvalidCastException<span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 102); ">"The value of the step size ("</span> <span style="color: rgb(0, 128, 0); ">+</span> stepSize<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">StepSize</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">ToString</span><span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(0, 128, 0); ">)</span> <span style="color: rgb(0, 128, 0); ">+</span> <span style="color: rgb(102, 102, 102); ">") cannot be converted to numeric."</span><span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
 
            <span style="color: rgb(0, 128, 128); font-style: italic; ">// we should have everything we need, so create the HTML range input and return.</span>
            var rangeInput <span style="color: rgb(0, 128, 0); ">=</span> htmlHelper<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">RangeInput</span><span style="color: rgb(0, 128, 0); ">(</span>
               mexp<span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Member</span><span style="color: rgb(0, 128, 0); ">.</span><span style="color: rgb(0, 0, 255); ">Name</span>,
                <span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">double</span><span style="color: rgb(0, 128, 0); ">)</span>min,
                <span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">double</span><span style="color: rgb(0, 128, 0); ">)</span>max,
                <span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">double</span><span style="color: rgb(0, 128, 0); ">)</span>value,
                <span style="color: rgb(0, 128, 0); ">(</span><span style="color: rgb(102, 102, 204); font-weight: bold; ">double</span><span style="color: rgb(0, 128, 0); ">)</span>step,
                htmlAttributes                
            <span style="color: rgb(0, 128, 0); ">)</span><span style="color: rgb(0, 128, 0); ">;</span>
            <span style="color: rgb(6, 0, 255); font-weight: bold; ">return</span> rangeInput<span style="color: rgb(0, 128, 0); ">;</span>
        <span style="color: rgb(0, 128, 0); ">}</span>
    <span style="color: rgb(0, 128, 0); ">}</span>
<span style="color: rgb(0, 128, 0); ">}</span>