I've tried some code from Client-side rendering (JS Link) code samples but I can't get that slider to work on edit form.

(function () {

// Create object that have the context information about the field that we want to change it's output render 
var percentCompleteFiledContext = {};
percentCompleteFiledContext.Templates = {};
percentCompleteFiledContext.Templates.Fields = {
    // Apply the new rendering for PercentComplete field on List View, Display, New and Edit forms
    "PercentComplete": { 
        "View": percentCompleteViewFiledTemplate,
        "DisplayForm": percentCompleteViewFiledTemplate,
        "NewForm": percentCompleteEditFiledTemplate,
        "EditForm": percentCompleteEditFiledTemplate



function percentCompleteViewFiledTemplate(ctx) {

var percentComplete = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
return "<div style='background-color: #e5e5e5; width: 100px;  display:inline-block;'> \
        <div style='width: " + percentComplete.replace(/\s+/g, '') + "; background-color: #0094ff;'> \
        &nbsp;</div></div>&nbsp;" + percentComplete;


function percentCompleteEditFiledTemplate(ctx) {

var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

// Register a callback just before submit.
formCtx.registerGetValueCallback(formCtx.fieldName, function () {
    return document.getElementById('inpPercentComplete').value;

return "<input type='range' id='inpPercentComplete' name='inpPercentComplete' min='0' max='100' \
        oninput='outPercentComplete.value=inpPercentComplete.value' value='" + formCtx.fieldValue + "' /> \
        <output name='outPercentComplete' for='inpPercentComplete' >" + formCtx.fieldValue + "</output>%";


I've tried it on an Office 365 SP site. I think that document.getElementById('inpPercentComplete') returns null Any ideas ? Thank you


  • What does document.getElementById('inpPercentComplete').value return in F12 Dev Tools when the EditForm is loaded? – Danny '365CSI' Engelman Oct 12 '15 at 18:48
  • <input type="text" value="50" id="PercentComplete_d2311440-1ed6-46ea-b46d-daa643dc3886_$NumberField" title="% Complete" size="11" class="ms-input" style="ime-mode : inactive"> – user3145 Oct 13 '15 at 5:02

I copy / pasted your code and it seems to be working fine.


Things to check:

  • Check if you have attached your JSLink file properly to the webpart. Follow the steps outlined here: Article

  • If the above doesn't work, you can simply edit the page, add a content editor / script editor webpart below the EditForm webpart and add the code there.

  • If you still have problems and need help writing JSLink, use this super awesome tool by Andrey Markeev which will automatically list the webpart you want to add the code to, along with associating the file to that webpart when you create it: Cisar

  • With Cisar it's working. GREAT extension !!! – user3145 Oct 13 '15 at 12:08
  • I tried a very early release of Cisar, couldn't get to work. Installed it again.. best thing since sliced bread! – Danny '365CSI' Engelman Oct 13 '15 at 18:37

Doing double work :-\

I also copy/pasted your code and it worked fine.

As I needed a more generic version for any (internal) FieldName I rewrote it to:

(function () {
    var percentCompleteFiledContext = {
        Templates: {
            Fields: {
                "PercentComplete": {
                    "View": percentFieldTemplate,
                    "DisplayForm": percentFieldTemplate,
                    "NewForm": percentFieldTemplate,
                    "EditForm": percentFieldTemplate


function percentFieldTemplate(ctx) {
    var H, percentComplete = parseInt(ctx.CurrentItem[ctx.CurrentFieldSchema.Name]);
    if ([1,4].indexOf(ctx.ControlMode) !== -1) { //DisplayForm(1) or View(4)
        H = "<div style='background-color:#e5e5e5;width:100px;display:inline-block;position:relative'>";
        H += "<div style='width:{1}%;background-color:#0094ff;'>&nbsp;</div>";
        H += "<div style=position:absolute;top:0px;left:2px;font-weight:bold>{1} %</div>";
        H += "</div>";
    } else { //NewForm or EditForm
        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
        formCtx.registerGetValueCallback(formCtx.fieldName, function () {
            return document.getElementById('inp' + formCtx.fieldName).value;
        H = "<input type='range' id='inp{0}' name='inp{0}' min='0' max='100' oninput='out{0}.value=inp{0}.value' value='{{1}}' />";
        H += "<output name='out{0}' for='inp{0}' >{{1}}</output>%";
        H = String.format(H, formCtx.fieldName);
    return String.format(H, 'replace {1} with:', percentComplete);

Update 1

I struggled with this an eventually found the default Microsoft code for a ProgressBar is only loaded in DragDrop.js

Thus for a VIEW only (unless you load DragDrop.js yourself) You can use:

H=SPProgressMeter.CreateMeter( parseInt(percentComplete) );

it returns HTML:

<div class="ms-progress-meter"><div class="ms-progress-meter-inner" style="width: 45%;"></div></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.