gui-dat

is a super-light javascript library for making GUI elements. It is inspired by controlP5.

var controllableObject = 
   {   
      numberProperty: 20,
      constrainedNum: 0,
      notchedNum: 240,
      pageTitle: "gui-dat",
      anotherTextProperty: "another string",
      booleanProperty: false,
      anotherBooleanProperty: false,
      functionProperty: function() {
         alert("I am a function!");
      }
   };

window.onload = function() {

   prettyPrint();

   GUI.start();

   // Creates a number box
   GUI.add(controllableObject, "numberProperty");

   // Creates a slider (min, max)
   GUI.add(controllableObject, "constrainedNum", -100, 100)

   // Creates a slider with notches
   GUI.add(controllableObject, "notchedNum", 0, 800, 100)

   // Creates a text field
   GUI.add(controllableObject, "pageTitle");

   // Creates a checkbox
   GUI.add(controllableObject, "booleanProperty");

   // Creates a button
   GUI.add(controllableObject, "functionProperty")
      .setName("Fire a Function");
};