Math.clamp = function(x, min, max){return Math.floor(Math.min(max, Math.max(min,x)))}; var Colorer = { getLevel: function () { return this.options.level; }, setLevel: function (x) { var level = Math.clamp(x, 0, this.options.colors.length-1); this.options.level = level; this.element.css({background: this.options.colors[level]}); this._trigger('change', 0, level); }, _init: function() { this.setLevel(this.getLevel()); }, // grab the default value and use it options: { level: 15, colors: [ '#000','#010','#020','#030', '#040','#050','#060','#070', '#080','#090','#0a0','#0b0', '#0c0','#0d0','#0e0','#0f0', '#fff' ] } }; $.widget("ui.colorer", Colorer); var ColorerMouse = $.extend(true, {}, $.ui.colorer.prototype, { _init: function(){ $.ui.colorer.prototype._init.call(this); // super call this._mouseInit(); // start up the mouse handling }, destroy: function(){ this._mouseDestroy(); $.ui.colorer.prototype.destroy.call(this); // super call }, // need to override the mouse functions _mouseStart: function(e){ this.xStart = e.pageX; // keep track of where the mouse started this.levelStart = this.options.level; }, _mouseDrag: function(e){ this.setLevel (this.levelStart +(e.pageX-this.xStart)/this.options.distance); }, options: { distance: 10 } }); $.widget("ui.colorerMouse", $.ui.mouse, ColorerMouse); $('#green').colorerMouse({ change: function(event, level) { $('.level', this).text(level); } }); $('#red').colorerMouse({ change: function(event, level) { $('.level', this).text(level); }, colors: [ '#000','#100','#200','#300', '#400','#500','#600','#700', '#800','#900','#a00','#b00', '#c00','#d00','#e00','#f00', '#fff' ] });