diff --git a/examples/js/index.js b/examples/js/index.js
index a1e1bc9..8f7678e 100644
--- a/examples/js/index.js
+++ b/examples/js/index.js
@@ -739,22 +739,17 @@ if (showUI) {
     // --------------- [ make a GUI for each CSS variable that affects GUI ] -----------------
     const obj = {};
 
-    const folder = gui.addFolder('Style');
-    for (const {vars} of varNamesBySelector) {
-      for (const {key, rule} of vars) {
-        const value = rule.style.getPropertyValue(key).trim();
-        if (looksLikeCSSColor(value)) {
-          obj[key] = cssStringToHexColor(value);
-          controllersByKey[key] = folder.addColor(obj, key).onChange(updateMuiguiCSSStyles);
-        } else if (!value.startsWith('var')){
-          obj[key] = value;
-          controllersByKey[key] = folder.add(obj, key).onChange(v => {
-            const fn = fns[key];
-            if (fn) {
-              fn(v);
-            }
-            updateMuiguiCSSStyles();
-          });
+  for (const {name: key, rule} of varNames) {
+    const value = rule.style.getPropertyValue(key).trim();
+    if (value.startsWith('#')) {
+      obj[key] = cssStringToHexColor(value);
+      controllersByKey[key] = folder.addColor(obj, key).onChange(updateStyles);
+    } else if (!value.startsWith('var')){
+      obj[key] = value;
+      controllersByKey[key] = folder.add(obj, key).onChange(v => {
+        const fn = fns[key];
+        if (fn) {
+          fn(v);
         }
       }
     }
diff --git a/package.json b/package.json
index 8209653..e3a0240 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "muigui",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A Simple GUI",
   "main": "muigui.js",
   "module": "src/muigui.js",
diff --git a/src/libs/utils.js b/src/libs/utils.js
index 790df0a..c85777a 100644
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -72,3 +72,39 @@ export const makeRangeOptions = ({from, to, step}) => {
   };
 };
 
+// TODO: remove an use one in conversions. Move makeRangeConverters there?
+export const identity = {
+  to: v => v,
+  from: v => [true, v],
+};
+export function makeMinMaxPair(gui, properties, minPropName, maxPropName, options) {
+  const { converters: { from } = identity } = options;
+  const { min, max } = options;
+  const guiMinRange = options.minRange || 0;
+  const valueMinRange = from(guiMinRange)[1];
+  console.log('guiMinRange', guiMinRange);
+  console.log('valueMinRange', valueMinRange);
+  return [
+    gui
+        .add(properties, minPropName, {
+          ...options,
+          min,
+          max: max - guiMinRange,
+        })
+        .listen()
+        .onChange(v => {
+          properties[maxPropName] = Math.min(max, Math.max(v + valueMinRange, properties[maxPropName]));
+        }),
+    gui
+        .add(properties, maxPropName, {
+          ...options,
+          min: min + guiMinRange,
+          max,
+        })
+        .listen()
+        .onChange(v => {
+          properties[minPropName] = Math.max(min, Math.min(v - valueMinRange, properties[minPropName]));
+        }),
+  ];
+}
+
diff --git a/src/muigui.js b/src/muigui.js
index 9255bf8..27b7d39 100644
--- a/src/muigui.js
+++ b/src/muigui.js
@@ -5,6 +5,7 @@ import {
   mapRange,
   makeRangeConverters,
   makeRangeOptions,
+  makeMinMaxPair,
 } from './libs/utils.js';
 import {
   converters
@@ -95,6 +96,7 @@ export class GUI extends GUIFolder {
   static mapRange = mapRange;
   static makeRangeConverters = makeRangeConverters;
   static makeRangeOptions = makeRangeOptions;
+  static makeMinMaxPair = makeMinMaxPair;
   #localStyleSheet = new CSSStyleSheet();
 
   constructor(options = {}) {
diff --git a/src/styles/muigui.css.js b/src/styles/muigui.css.js
index afc50af..9fb8958 100644
--- a/src/styles/muigui.css.js
+++ b/src/styles/muigui.css.js
@@ -1,5 +1,5 @@
 export default `
-.muigui-colors {
+.muigui {
   --bg-color: #ddd;
   --color: #222;
   --value-color: #145 ;
@@ -24,7 +24,7 @@ export default `
 }
 
 @media (prefers-color-scheme: dark) {
-  .muigui-colors {
+  .muigui {
     --bg-color: #222222;
     --color: #dddddd;
     --value-color: #43e5f7;
diff --git a/src/views/RangeView.js b/src/views/RangeView.js
index 38ace94..c7ba746 100644
--- a/src/views/RangeView.js
+++ b/src/views/RangeView.js
@@ -22,16 +22,22 @@ export default class RangeView extends EditView {
       type: 'range',
       onInput: () => {
         this.#skipUpdate = true;
-        const [valid, v] = this.#from(parseFloat(this.domElement.value));
+        const {min, max, step} = this.#options;
+        const v = parseFloat(this.domElement.value);
+        const newV = clamp(stepify(v, v => v, step), min, max);
+        const [valid, validV] = this.#from(newV);
         if (valid) {
-          setter.setValue(v);
+          setter.setValue(validV);
         }
       },
       onChange: () => {
         this.#skipUpdate = true;
-        const [valid, v] = this.#from(parseFloat(this.domElement.value));
+        const {min, max, step} = this.#options;
+        const v = parseFloat(this.domElement.value);
+        const newV = clamp(stepify(v, v => v, step), min, max);
+        const [valid, validV] = this.#from(newV);
         if (valid) {
-          setter.setFinalValue(v);
+          setter.setFinalValue(validV);
         }
       },
       onWheel: e => {