diff --git a/source/Ox.UI/js/Form/Ox.Filter.js b/source/Ox.UI/js/Form/Ox.Filter.js
index 754d8579..f56311c6 100644
--- a/source/Ox.UI/js/Form/Ox.Filter.js
+++ b/source/Ox.UI/js/Form/Ox.Filter.js
@@ -714,6 +714,7 @@ Ox.Filter = function(options, self) {
             if (formatType == 'color') {
                 isHue = formatArgs[0] == 'hue';
                 $input = Ox.Range({
+                    changeOnDrag: false,
                     max: isHue ? 360 : 1,
                     min: 0,
                     size: !isArray ? 288 : 128, // fixme: should be width!
diff --git a/source/Ox.UI/js/Form/Ox.Range.js b/source/Ox.UI/js/Form/Ox.Range.js
index 66c0a258..0fd32344 100644
--- a/source/Ox.UI/js/Form/Ox.Range.js
+++ b/source/Ox.UI/js/Form/Ox.Range.js
@@ -30,10 +30,10 @@ Ox.Range = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
             .defaults({
-                // fixme: needs a changeOnDrag option (default true)
                 arrows: false,
                 arrowStep: 1,
                 arrowSymbols: ['left', 'right'],
+                changeOnDrag: true,
                 max: 100,
                 min: 0,
                 orientation: 'horizontal',
@@ -93,10 +93,12 @@ Ox.Range = function(options, self) {
         }, self.trackImages == 1 ? {
             background: 'rgb(0, 0, 0)'
         } : {}))
-        .bindEvent({
+        .bindEvent(Ox.extend({
             mousedown: clickTrack,
             drag: dragTrack
-        })
+        }, self.options.changeOnDrag ? {} : {
+            dragend: dragendTrack
+        }))
         .appendTo(that.$element);
 
     self.trackColors && setTrackColors();
@@ -109,7 +111,6 @@ Ox.Range = function(options, self) {
             })
             .appendTo(self.$track.$element);
         self.options.trackImages.forEach(function(v, i) {
-            //Ox.Log('Form', self.trackImageWidths[i])
             $('<img>')
                 .attr({
                     src: v
@@ -135,12 +136,6 @@ Ox.Range = function(options, self) {
             width: self.thumbSize
         })
         .addClass('OxThumb')
-        /*
-        .css({
-            border: '1px solid rgb(255, 255, 255)',
-            background: 'rgba(0, 0, 0, 0)'
-        })
-        */
         .appendTo(self.$track);
 
     setThumb();
@@ -165,7 +160,16 @@ Ox.Range = function(options, self) {
     }
 
     function dragTrack(data) {
-        setValue(getVal(data.clientX - self.drag.left - self.drag.offset))
+        setValue(
+            getVal(data.clientX - self.drag.left - self.drag.offset),
+            false,
+            self.options.changeOnDrag
+        );
+    }
+
+    function dragendTrack(data) {
+        self.options.value = void 0;
+        setValue(getVal(data.clientX - self.drag.left - self.drag.offset));
     }
 
     function getPx(val) {
@@ -240,15 +244,16 @@ Ox.Range = function(options, self) {
         });
     }
 
-    function setValue(value, animate) {
+    function setValue(value, animate, trigger) {
         // fixme: toPrecision helps with imprecise results of divisions,
         // but won't work for very large values. And is 10 a good value?
         value = Ox.limit(value.toPrecision(10), self.options.min, self.options.max);
+        trigger = trigger !== false;
         if (value != self.options.value) {
             //time = getTime(self.options.value, value);
             self.options.value = value;
             setThumb(animate);
-            that.triggerEvent('change', {value: value});
+            trigger && that.triggerEvent('change', {value: value});
         }
     }