diff --git a/docs/_layouts/palette.njk b/docs/_layouts/palette.njk
index f16c57df9..3f2616efe 100644
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -186,11 +186,10 @@
           <template #content>
             <color-slider v-if="isCustom && seedHues[hue] && (tint == '95' || tint == '05' || seedColors[colorToIndex[hue][tint]]) && tweakBase[hue][tint]"
               v-model:color="colors[hue][tint]"
-              @input="!seedColors[colorToIndex[hue][tint]] ? addColor({hue, level: tint}) : null"
               :default-value="colors[hue][tweakBase[hue][tint]].oklch.h"
-
+              @input="!seedColors[colorToIndex[hue][tint]] ? addColor({hue, level: tint}) : null"
               coord="h"
-              :min="HUE_RANGES[hue].min + 1" :max="HUE_RANGES[hue].max" :step="1"
+              :min="HUE_RANGES[hue].mid - 70" :max="HUE_RANGES[hue].mid + 70" :step="1"
               label="Hue shift" :label-min="moreHue[hueBefore[hue]]" :label-max="moreHue[hueAfter[hue]]"
               :label-default="`${capitalize(hue)} ${tweakBase[hue][tint]}`"
               ></color-slider>
diff --git a/docs/docs/palettes/app/vue-components/color-slider.js b/docs/docs/palettes/app/vue-components/color-slider.js
index bbf3a5278..0b4028547 100644
--- a/docs/docs/palettes/app/vue-components/color-slider.js
+++ b/docs/docs/palettes/app/vue-components/color-slider.js
@@ -21,7 +21,7 @@ const template = `
 
 import Color from 'https://colorjs.io/dist/color.js';
 import InfoTip from './info-tip.js';
-import { capitalize, clamp, promise, roundTo } from '/assets/scripts/tweak/util.js';
+import { capitalize, promise, roundTo } from '/assets/scripts/tweak/util.js';
 
 export default {
   props: {
@@ -50,9 +50,6 @@ export default {
 
     modelValue: {
       type: Number,
-      default(rawProps) {
-        return rawProps.defaultValue;
-      },
     },
     min: Number,
     max: Number,
@@ -90,6 +87,16 @@ export default {
         '<color-slider> requires at least one of the following props: color, defaultColor',
       );
     }
+
+    if (this.modelValue !== undefined) {
+      this.value = getAbsoluteValue({
+        type: this.type,
+        relativeValue: this.modelValue,
+        baseValue: this.computedDefaultValue,
+      });
+    } else if (this.color) {
+      this.value = this.colorCoords[this.coordIndex];
+    }
   },
   mounted() {
     if (this.$refs.slider) {
@@ -97,12 +104,6 @@ export default {
       this.$refs.slider.colorSliderData = this; // for debugging
     }
 
-    this.value = getAbsoluteValue({
-      type: this.type,
-      relativeValue: this.modelValue,
-      baseValue: this.computedDefaultValue,
-    });
-
     this.mounted.resolve();
   },
   beforeUnmount() {
@@ -228,17 +229,12 @@ export default {
       }
     },
 
-    async colorString() {
-      await this.$nextTick();
-      await this.mounted;
-
+    colorString() {
       if (this.color && this.colorString !== this.computedColorString) {
         // Color changed in the outside world, update our internals
         if (this.colorCoords[this.coordIndex] !== this.value) {
           this.value = this.colorCoords[this.coordIndex];
 
-          await this.$nextTick();
-
           let modelValue = getRelativeValue({
             type: this.type,
             absoluteValue: this.value,