Rudimentary jQuery-based code to make "reactive documents", similar to http://worrydream.com/#!/Tangle

adjustable.css

.adjustable { color: blue; border-bottom: dotted blue 1px; cursor: col-resize; }
.adjusting { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

adjustable.js

jQuery( function($) {
  $( '.adjustable')
    .mousedown( function( event) {

      var target = $( this);
      var start_value = parseFloat( target.text());
      var current_value = start_value;
      var offset = 0;
      var start_position = event.pageX;

      var minimum = parseFloat( target.attr( 'data-minimum'));
      var maximum = parseFloat( target.attr( 'data-maximum'));
      var precision = parseFloat( target.attr( 'data-precision'));
      if ( isNaN( precision)) precision = 1;

      $( 'body').addClass( 'adjusting');
      $( window)
	.on( 'mousemove.adjusting', function( event) {
	  var new_offset = precision * Math.round(( event.pageX - start_position) / 10);
	  if ( new_offset == offset) return;

	  var new_value = start_value + new_offset;
	  if ( new_value < minimum || new_value > maximum) return;	// this is meant to allow NaNs for minimum and maximum to mean "unbounded"

	  target.trigger( 'adjust', { from: new_value, to: current_value });
	  target.text( new_value);
	  offset = new_offset;
	  current_value = new_value;
	})
	.mouseup( function( event) {
	  $( window).off( 'mousemove.adjusting');
	  target.trigger( 'adjusted', { from: start_value, to: current_value });
	  $( 'body').removeClass( 'adjusting');
	});
      });
});

Usage notes:

Looks for text marked with class 'adjustable', and turns it into a reactive number. Click and drag to adjust the number, let go to set the final value. Fires jQuery "adjust" events every time the number changes, and a jQuery "adjusted" event when you let go.