Second Life of a Hungarian SharePoint Geek

April 17, 2013

Replacing the standard textbox for numeric fields with a Slider using HTML5

Filed under: HTML5, JavaScript, jQuery, SP 2010, SP 2013 — Tags: , , , , — Peter Holpar @ 11:39

HTML5 supports a special input field type called Range. It would be nice to use this type of control when we should provide the user an edit form to enter a limited range of integer values.

If this type of control is required in multiple lists, a straightforward option would be to create a custom field type. However, if it’s about only a single list, or deploying the assembly and other artifacts for the custom field is not allowed (like in the case of O365), than there is a simpler way to choose. We have to hide the original Text field for the numeric field and inject the Range control using JavaScript / jQuery. To persist the values set through the slider, we have to write back the changed values to the original, hidden Text field.

I’ve created a new custom list called Values on my O365 site, with a numeric field Value. The jQuery library was uploaded to a document library called scripts. Then I injected the following script block using a Content Editor web part into the NewForm.aspx / EditForm.aspx pages:

Code Snippet
  1. <script language="javascript" src="/scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
  2. <script language="javascript" type="text/javascript">
  4.     $(document).ready(startAction);
  6.     function startAction() {
  7.         // hide original Text input field
  8.         $("input[title$=Value]").hide();
  9.         // inject our range control that allows entering values between 0 and 10
  10.         $("input[title$=Value]").before('<input id="myRange" type="range" min="0" max="10"/>&nbsp;<span id="myRangeValue"/>');
  12.         var cv = $("input[title$=Value]").val();
  14.         // if the value is empty, set a default value of 0
  15.         cv = (cv == "") ? 0 : cv;
  16.         $("input[title$=Value]").val(cv);
  18.         // synchronize initial values
  19.         $("input#myRange").val(cv);
  20.         $("span#myRangeValue").html(cv);
  22.         // register change event handler
  23.         $("input#myRange").change(function() { updateValue(); });
  24.     }    
  26.     function updateValue() {
  27.         var cv = $("input#myRange").val();
  28.         $("input[title$=Value]").val(cv);
  29.         $("span#myRangeValue").html(cv);
  30.     }
  32. </script>

The figure below illustrates the effect of the customization. Of course, you need to have a HTML5-compatible browser, like IE10 and the browser compatibility mode correctly set using IE developer tools (F12):


And what’s with SharePoint 2010? There are options to enable HTML5 for SharePoint 2010 (see a solution here), however be aware, that it may have negative impacts on other vital SharePoint features, as described here. I’ve tested the same solution with SP2010, and it seems to be OK, nevertheless, I suggest you to turn on HTML5 support only for the affected pages, setting their master page to a custom one as described in the referenced article, and not altering the default master page for the site.



  1. You might be interested in SharePoint Javascripts. That guy is doing a lot with the standard forms client side. The dynamic forms are impressive:

    Comment by Dennis — April 17, 2013 @ 12:20

RSS feed for comments on this post. TrackBack URI

Leave a Reply

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

You are commenting using your 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

Blog at

%d bloggers like this: