diff --git a/docs/advanced.md b/docs/advanced.md
index 6fb520f..e87081a 100644
--- a/docs/advanced.md
+++ b/docs/advanced.md
@@ -98,9 +98,15 @@ var colorPicker = new iro.ColorPicker('#picker', {
 });
 ```
 
+There's a few optional box-specific config options that can be used:
+
+| Option           | Purpose | Default Value |
+|:-----------------|:--------|:--------|
+| `boxHeight`      | Height of the box, measured in pixels. If this isn't set, it will use the box's width as its height | `null` |
+
 #### Sliders
 
-<ColorPicker :width="240" :handleRadius="8" :sliderMargin="12" :layout="[
+<ColorPicker :width="240" :handleRadius="8" :sliderMargin="12" layoutDirection="horizontal" :layout="[
   {
     component: 'Slider',
     options: {
@@ -119,6 +125,24 @@ var colorPicker = new iro.ColorPicker('#picker', {
       sliderType: 'value',
     }
   },
+  {
+    component: 'Slider',
+    options: {
+      sliderType: 'red',
+    }
+  },
+  {
+    component: 'Slider',
+    options: {
+      sliderType: 'green',
+    }
+  },
+  {
+    component: 'Slider',
+    options: {
+      sliderType: 'blue',
+    }
+  },
   {
     component: 'Slider',
     options: {
@@ -131,9 +155,6 @@ var colorPicker = new iro.ColorPicker('#picker', {
       sliderType: 'kelvin',
     }
   },
-]"/>
-
-<ColorPicker :width="230" :handleRadius="8" :sliderMargin="12" :layout="[
   {
     component: 'Slider',
     options: {
@@ -142,8 +163,12 @@ var colorPicker = new iro.ColorPicker('#picker', {
     }
   },
 ]"/>
+<!-- 
+<ColorPicker :width="230" :handleRadius="8" :sliderMargin="12" :layout="[
+  
+]"/> -->
 
-Sliders allow the user to adjust a specific color channel. Currently there are multiple types of sliders available, covering **hue**, **saturation**, **value**, **alpha** and **kelvin temperature**.
+Sliders allow the user to adjust a specific color channel. There are multiple slider types available, covering **hue**, **saturation**, **value**, **red**, **green**, **blue**, **alpha** and **kelvin temperature**.
 
 ##### `sliderType`
 
@@ -155,7 +180,8 @@ var colorPicker = new iro.ColorPicker('#picker', {
     { 
       component: iro.ui.Slider,
       options: {
-        sliderType: 'hue' // can also be 'saturation', 'value', 'alpha' or 'kelvin'
+        // can also be 'saturation', 'value', 'red', 'green', 'blue', 'alpha' or 'kelvin'
+        sliderType: 'hue'
       }
     },
   ]
@@ -166,7 +192,7 @@ If `sliderType` is set to `'kelvin'`, the temperature range can be set with thes
 
 | Option           | Purpose | Default Value |
 |:-----------------|:--------|:--------|
-| `minTemperature` | Minimum color temperature, in Kelvin (smallest value is `1000`) | `2200` |
+| `minTemperature` | Minimum color temperature, in Kelvin (smallest value is `2000`) | `2200` |
 | `maxTemperature` | Maximum color temperature, in Kelvin (largest value is `40000`) | `11000` |
 
 ##### `sliderShape`
@@ -264,6 +290,32 @@ It's also possible to programmatically set the active color, by passing the inde
 colorPicker.setActiveColor(1);
 ```
 
+### Components Using the Active Color
+
+By default, Silder and Box components will reflect whichever color is currently active. However this can be manually overriden with their `activeIndex` option:
+
+```js
+var colorPicker = new iro.ColorPicker("#demoWheel", {
+  layout: [
+    // default slider, will reflect whichever color is currently active
+    {
+      component: iro.ui.Slider,
+      options: {
+        sliderType: 'value'
+      }
+    },
+    // this slider will always reflect the color at index 2
+    {
+      component: iro.ui.Slider,
+      options: {
+        sliderType: 'value',
+        activeIndex: 2,
+      }
+    },
+  ]
+});
+```
+
 ### Adding and Removing Colors
 
 Colors can be added and removed from the color picker at any time:
diff --git a/docs/colorPicker_api.md b/docs/colorPicker_api.md
index 3278938..6fda5ff 100644
--- a/docs/colorPicker_api.md
+++ b/docs/colorPicker_api.md
@@ -79,6 +79,12 @@ Radius of the control handles, measued in pixels.
 
 **Default value**: `8`
 
+### `activeHandleRadius`
+
+Overrides `handleRadius` for the handle of the currently selected color.
+
+**Default value**: Inherits `handleRadius` value by default
+
 ### `handleSvg`
 
 SVG reference for [Custom Handles](/advanced.html#custom-handles). This should be an ID selector that matches your handle SVG.
@@ -115,6 +121,12 @@ Slider size, measued in pixels.
 
 **Default value**: By default this will be calculated automatically from `padding` and `handleRadius`.
 
+### `boxHeight`
+
+Box control height, measued in pixels.
+
+**Default value**: By default this will be the same value as `width`.
+
 ## Properties
 
 ### `color`
diff --git a/docs/guide.md b/docs/guide.md
index 7860402..d98d180 100644
--- a/docs/guide.md
+++ b/docs/guide.md
@@ -83,12 +83,14 @@ var colorPicker = new iro.ColorPicker("#picker", {
 | `borderWidth`    | Width of the border around the controls. Set to `0` for no border. | `0` |
 | `borderColor`    | Color of the border. Any valid CSS color is supported. | `"#ffffff"` |
 | `handleRadius`   | Radius of the control handles. | `8` |
+| `activeHandleRadius` | Radius of the control handle for the currently selected color. | Inherits `handleRadius` |
 | `handleSvg`      | Custom handle SVG, used for [custom handles](/advanced.html#custom-handles). | `null` |
 | `handleProps`    | Custom handle properties, used for [custom handles](/advanced.html#custom-handles). | `{x:0, y:0}` |
 | `wheelLightness` | If set to `false`, the color wheel will not fade to black when the lightness decreases. | `true` |
 | `wheelAngle`     | Starting angle of the color wheel's hue gradient, measured in degrees. | `0` |
 | `wheelDirection` | Direction of the color wheel's hue gradient; either `"clockwise"` or `"anticlockwise"`. | `"anticlockwise"` |
 | `sliderSize`     | Slider control size. By default this will be calculated automatically. | `undefined` |
+| `boxHeight`     | Box control height. By default this will be the same as the `width`. | `undefined` |
 
 More details about color picker options, properties, and methods can be found on the [colorPicker API documentation](/colorPicker_api.html).
 
diff --git a/docs/index.md b/docs/index.md
index 303e5f4..577853e 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -3,6 +3,40 @@ layout: Home
 home: true
 ---
 
+::: slot introduction
+Modular, design-conscious color picker widget for JavaScript
+:::
+
+::: slot feature-colors
+Work with colors in hex, RGB, HSV and HSL formats (plus kelvin temperatures!) in one simple, frictionless API.
+:::
+
+::: slot feature-colors-example 
+```js
+// Get the color as an RGB string 
+var rgb = colorPicker.color.rgbString; 
+// rgb = "{{ rgbString }}" 
+
+// Get the color as a HSV object 
+var hsv = colorPicker.color.hsv; 
+// hsv = {{ rgbString }}
+
+// Set the color from a hex string 
+colorPicker.color.hexString = "#fff";
+
+// Set the color from a temperature 
+colorPicker.color.kelvin = 6000;
+```
+:::
+
+::: slot feature-multicolor
+Add multiple colors to the same color picker for selecting color harmonies and themes.
+:::
+
+::: slot feature-components
+Create the perfect color picker from a selection of pre-built UI components.
+:::
+
 ::: slot tutorial-iro-js
 ### Installation
 
@@ -106,4 +140,5 @@ colorPicker.on('color:change', function(color) {
 });
 ```
 
-For a full overview of the available events can be found in the [events documentation](/guide.html#color-picker-events).
\ No newline at end of file
+For a full overview of the available events can be found in the [events documentation](/guide.html#color-picker-events).
+:::
\ No newline at end of file
diff --git a/docs/zh/advanced.md b/docs/zh/advanced.md
index 58ffb1c..78b9058 100644
--- a/docs/zh/advanced.md
+++ b/docs/zh/advanced.md
@@ -98,9 +98,15 @@ var colorPicker = new iro.ColorPicker('#picker', {
 });
 ```
 
+可以使用一些可选的特定于盒子的配置选项：
+
+| 选项          | 用途                                  | 默认值    |
+|:----------- |:----------------------------------- |:------ |
+| `boxHeight` | 方框的高度，以像素为单位。 如果没有设置，它将使用盒子的宽度作为其高度 | `null` |
+
 #### Sliders 滑块
 
-<ColorPicker :width="240" :handleRadius="8" :sliderMargin="12" :layout="[
+<ColorPicker :width="240" :handleRadius="8" :sliderMargin="12" layoutDirection="horizontal" :layout="[
   {
     component: 'Slider',
     options: {
@@ -119,6 +125,24 @@ var colorPicker = new iro.ColorPicker('#picker', {
       sliderType: 'value',
     }
   },
+  {
+    component: 'Slider',
+    options: {
+      sliderType: 'red',
+    }
+  },
+  {
+    component: 'Slider',
+    options: {
+      sliderType: 'green',
+    }
+  },
+  {
+    component: 'Slider',
+    options: {
+      sliderType: 'blue',
+    }
+  },
   {
     component: 'Slider',
     options: {
@@ -130,9 +154,7 @@ var colorPicker = new iro.ColorPicker('#picker', {
     options: {
       sliderType: 'kelvin',
     }
-  }, ]"/>
-
-<ColorPicker :width="230" :handleRadius="8" :sliderMargin="12" :layout="[
+  },
   {
     component: 'Slider',
     options: {
@@ -140,8 +162,12 @@ var colorPicker = new iro.ColorPicker('#picker', {
       sliderShape: 'circle',
     }
   }, ]"/>
+<!-- 
+<ColorPicker :width="230" :handleRadius="8" :sliderMargin="12" :layout="[
+  
+]"/> -->
 
-滑块允许用户调整特定的颜色通道。 当前有多种类型的滑块可用，包括 色调 **hue**，饱和度 **saturation**，值 **value**，透明通道 **alpha** 和 冷暖值（开尔文温度） **kelvin temperature**.
+滑块允许用户调整特定的颜色通道。 有多种滑块类型可用，包括**色调**，**饱和度**，**值**，**红色**，**绿色**，**蓝色**，**alpha **和**冷暖值（开尔文温度）**。
 
 ##### `sliderType 滑块类型`
 
@@ -153,7 +179,8 @@ var colorPicker = new iro.ColorPicker('#picker', {
     { 
       component: iro.ui.Slider,
       options: {
-        sliderType: 'hue' //也可以是 'saturation', 'value', 'alpha' 或 'kelvin'
+        // 也可以是'saturation', 'value', 'red', 'green', 'blue', 'alpha' 或 'kelvin'
+        sliderType: 'hue'
       }
     },
   ]
@@ -164,7 +191,7 @@ var colorPicker = new iro.ColorPicker('#picker', {
 
 | 选项               | 用途                        | 默认值     |
 |:---------------- |:------------------------- |:------- |
-| `minTemperature` | Kelvin最小色温值(最小值为 `1000`)  | `2200`  |
+| `minTemperature` | Kelvin最小色温值(最小值为 `2000`)  | `2200`  |
 | `maxTemperature` | Kelvin最大色温值(最大值是 `40000`) | `11000` |
 
 ##### `sliderShape 滑块形状`
@@ -262,6 +289,32 @@ colorPicker.on('color:setActive', function(color) {
 colorPicker.setActiveColor(1);
 ```
 
+### 使用活动颜色的组件
+
+默认情况下，Silder 和 Box 组件将反映当前激活的任何颜色。 然而，这可以用他们的 `活动索引` 选项手动覆盖：
+
+```js
+var colorPicker = new iro.ColorPicker("#demoWheel", {
+  layout: [
+    // 默认滑块，将反映当前处于活动状态的任何颜色
+    {
+      component: iro.ui.Slider,
+      options: {
+        sliderType: 'value'
+      }
+    },
+    // 此滑块将始终反映索引2处的颜色
+    {
+      component: iro.ui.Slider,
+      options: {
+        sliderType: 'value',
+        activeIndex: 2,
+      }
+    },
+  ]
+});
+```
+
 ### 添加和删除颜色
 
 颜色可以随时从颜色选择器中添加和删除：
@@ -298,7 +351,11 @@ colorPicker.setColors([
 ```svg
 <svg>
   <defs>
-    <g id="handle"><!-- 手柄的svg内容开始 --><rect x="0" y="0" width="8" height="8"></rect><!-- 手柄的svg内容结束 --></g>
+    <g id="handle">
+      <!-- 手柄的svg内容开始 -->
+      <rect x="0" y="0" width="8" height="8"></rect>
+      <!-- 手柄的svg内容结束 -->
+    </g>
   </defs>
 </svg>
 ```
diff --git a/docs/zh/colorPicker_api.md b/docs/zh/colorPicker_api.md
index caccf17..5ba26b7 100644
--- a/docs/zh/colorPicker_api.md
+++ b/docs/zh/colorPicker_api.md
@@ -79,6 +79,12 @@ title: 颜色选择器 API
 
 **默认值**: `8`
 
+### `activeHandleRadius`
+
+为当前选择的颜色重写 `handleRadius`。
+
+**默认值**: 继承 `handleRadius` 的默认值
+
 ### `handleSvg`
 
 [自定义手柄](/advanced.html#自定义手柄)的SVG参考。 这应该是一个与您的手柄SVG匹配的ID选择器。
@@ -93,7 +99,7 @@ title: 颜色选择器 API
 
 ### `wheelLightness`
 
-如果设置为 `false`，当亮度降低时，颜色轮将不会变成黑色。
+如果设置为 `false`, 当亮度降低时，颜色轮将不会变成黑色.
 
 **默认值**: `true`
 
@@ -115,6 +121,12 @@ title: 颜色选择器 API
 
 **默认值**: 默认情况下，这将自动以 `padding` 和 `handleRadius` 计算。
 
+### `boxHeight`
+
+盒子控制高度，以像素计量。
+
+**默认值**: 默认情况下，这将与 `宽度` 相同。
+
 ## 属性
 
 ### `color`
diff --git a/docs/zh/guide.md b/docs/zh/guide.md
index 409ffca..13dde6d 100644
--- a/docs/zh/guide.md
+++ b/docs/zh/guide.md
@@ -67,26 +67,28 @@ var colorPicker = new iro.ColorPicker("#picker", {
 
 ### 可选选项
 
-| 选项                | 用途                                                     | 默认值               |
-|:----------------- |:------------------------------------------------------ |:----------------- |
-| `width`           | 控件的总宽度。                                                | `300`             |
-| `color`           | 初始颜色值。 这可以是任意 [支持的颜色格式](/color_api.html#支持的颜色格式)。      | `"#ffffff"`       |
-| `colors`          | 用于 [多颜色选择](/advanced.html#多颜色选择器) 的初始颜色值。              | null              |
-| `display`         | 颜色选择器根元素的 CSS 显示值。                                     | `"block"`         |
-| `id`              | 颜色选择器根元素的 HTML ID。                                     | `null`            |
-| `layout`          | 用于自定义 [UI 组件布局](/advanced.html#自定义-UI-布局)。             | `null`            |
-| `layoutDirection` | UI组件堆叠方向； 垂直 `"vertical"` 或 水平 `"horizontal"`.         | `"vertical"`      |
-| `padding`         | 在控制手柄周围填充。                                             | `6`               |
-| `margin`          | 各个组件之间的间隙。                                             | `12`              |
-| `borderWidth`     | 控制点边框的宽度。 设置为 `0` 表示无边框。                               | `0`               |
-| `borderColor`     | 边框的颜色。 支持任何有效的 CSS 颜色。                                 | `"#ffffff"`       |
-| `handleRadius`    | 控制手柄的半径                                                | `8`               |
-| `handleSvg`       | 自定义手柄SVG，用于 [自定义手柄](/advanced.html#自定义手柄)。             | `null`            |
-| `handleProps`     | 自定义手柄属性，用于 [自定义手柄](/advanced.html#自定义手柄)。              | `{x:0, y:0}`      |
-| `wheelLightness`  | 如果设置为 `false`, 当亮度降低时，颜色轮将不会变成黑色.                      | `true`            |
-| `wheelAngle`      | 色轮的色调渐变的起始角度，以度为单位。                                    | `0`               |
-| `wheelDirection`  | 颜色轮的色调渐变方向；可选 顺时针`"clockwise"` 或 逆时针`"anticlockwise"`。 | `"anticlockwise"` |
-| `sliderSize`      | 滑块控制大小。 默认情况下，这将自动计算。                                  | `undefined`       |
+| 选项                   | 用途                                                     | 默认值               |
+|:-------------------- |:------------------------------------------------------ |:----------------- |
+| `width`              | 控件的总宽度。                                                | `300`             |
+| `color`              | 初始颜色值。 这可以是任意 [支持的颜色格式](/color_api.html#支持的颜色格式)。      | `"#ffffff"`       |
+| `colors`             | 用于 [多颜色选择](/advanced.html#多颜色选择器) 的初始颜色值。              | null              |
+| `display`            | 颜色选择器根元素的 CSS 显示值。                                     | `"block"`         |
+| `id`                 | 颜色选择器根元素的 HTML ID。                                     | `null`            |
+| `layout`             | 用于自定义 [UI 组件布局](/advanced.html#自定义-UI-布局)。             | `null`            |
+| `layoutDirection`    | UI组件堆叠方向； 垂直 `"vertical"` 或 水平 `"horizontal"`.         | `"vertical"`      |
+| `padding`            | 在控制手柄周围填充。                                             | `6`               |
+| `margin`             | 各个组件之间的间隙。                                             | `12`              |
+| `borderWidth`        | 控制点边框的宽度。 设置为 `0` 表示无边框。                               | `0`               |
+| `borderColor`        | 边框的颜色。 支持任何有效的 CSS 颜色。                                 | `"#ffffff"`       |
+| `handleRadius`       | 控制手柄的半径                                                | `8`               |
+| `activeHandleRadius` | 当前选中颜色的控制句柄半径。                                         | 继承 `句柄半径`         |
+| `handleSvg`          | 自定义手柄SVG，用于 [自定义手柄](/advanced.html#自定义手柄)。             | `null`            |
+| `handleProps`        | 自定义手柄属性，用于 [自定义手柄](/advanced.html#自定义手柄)。              | `{x:0, y:0}`      |
+| `wheelLightness`     | 如果设置为 `false`, 当亮度降低时，颜色轮将不会变成黑色.                      | `true`            |
+| `wheelAngle`         | 色轮的色调渐变的起始角度，以度为单位。                                    | `0`               |
+| `wheelDirection`     | 颜色轮的色调渐变方向；可选 顺时针`"clockwise"` 或 逆时针`"anticlockwise"`。 | `"anticlockwise"` |
+| `sliderSize`         | 滑块控制大小。 默认情况下，这将自动计算。                                  | `undefined`       |
+| `boxHeight`          | 盒子控制高度. 默认情况下，这将与 `宽度` 相同。                             | `undefined`       |
 
 更多关于颜色选择器选项、属性和方法的详细信息可以在 [颜色选择器API 文档](/colorPicker_api.html) 中找到。
 
diff --git a/docs/zh/index.md b/docs/zh/index.md
index 21b0d42..b365d08 100644
--- a/docs/zh/index.md
+++ b/docs/zh/index.md
@@ -3,6 +3,40 @@ layout: 首页
 home: true
 ---
 
+::: slot introduction
+适用于JavaScript的模块化、注重设计的拾色器小部件
+:::
+
+::: slot feature-colors
+通过一个简单，无摩擦的API处理十六进制，RGB，HSV和HSL格式的颜色(还有开尔文温度！)。
+:::
+
+::: slot feature-colors-example
+```js
+// 获取颜色为 RGB 字符串 
+var rgb = colorPicker.color。 gbString; 
+// rgb = "{{ rgbString }}" 
+
+// 将颜色作为一个 HSV 对象 
+var hsv = colorPicker.color. sv; 
+// hsv = {{ rgbString }}
+
+// 设置十六进制字符串的颜色 
+colorPicker.color。 exString = "#fff";
+
+// 从温度设置颜色 
+color.color.kelvin = 6000;
+```
+:::
+
+::: slot feature-multicolor
+将多个颜色添加到同一个选取器以选择主题。
+:::
+
+::: slot feature-components
+从预构建界面组件中创建完美的颜色选择器。
+:::
+
 ::: slot tutorial-iro-js
 ### 安装
 
@@ -104,4 +138,4 @@ colorPicker.on('color:change', function(color) {
 });
 ```
 
-关于可用事件的全面概述，可在 [事件文档](/guide.html#颜色选择事件) 中找到。
\ No newline at end of file
+关于可用事件的全面概述，可在 [事件文档](/guide.html#颜色选择事件) 中找到。 :::
\ No newline at end of file