From 1349ef4aa0cffaec6454bc86f4e83e41f8b941d6 Mon Sep 17 00:00:00 2001
From: sansiro <sansiro@sansiro.me>
Date: Tue, 9 Aug 2022 10:49:28 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20input-number=E3=80=81input-range?=
 =?UTF-8?q?=E3=80=81checkbox=20=E5=8D=95=E6=B5=8B=E7=94=A8=E4=BE=8B?=
 =?UTF-8?q?=E8=A1=A5=E5=85=85=20&=20range=20style=20=E7=99=BE=E5=88=86?=
 =?UTF-8?q?=E6=AF=94=E6=9C=80=E5=A4=9A=E4=BF=9D=E7=95=99=E4=B8=A4=E4=BD=8D?=
 =?UTF-8?q?=20(#5076)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* checkbox 单测补充

* input-number 单测补充

* input-range 单测补充 & range style 百分比最多保留两位

Co-authored-by: tooeast <liuzedong02@baidu.com>
---
 packages/amis-ui/src/components/Range.tsx     |   3 +-
 .../Form/__snapshots__/checkbox.test.tsx.snap | 268 +++++
 .../Form/__snapshots__/number.test.tsx.snap   | 857 ++++++++++++++++
 .../Form/__snapshots__/range.test.tsx.snap    | 966 +++++++++++++-----
 .../renderers/Form/checkbox.test.tsx          |  90 +-
 .../__tests__/renderers/Form/number.test.tsx  | 183 +++-
 .../__tests__/renderers/Form/range.test.tsx   | 138 ++-
 7 files changed, 2220 insertions(+), 285 deletions(-)

diff --git a/packages/amis-ui/src/components/Range.tsx b/packages/amis-ui/src/components/Range.tsx
index c7399a656..e9dc531a5 100644
--- a/packages/amis-ui/src/components/Range.tsx
+++ b/packages/amis-ui/src/components/Range.tsx
@@ -78,7 +78,8 @@ const MARKS_REG = /^[0-9]+(\.?[0-9]+)?%$/;
  * @returns position.left
  */
 const valueToOffsetLeft = (value: any, min: number, max: number) =>
-  ((value - min) * 100) / (max - min) + '%';
+  // 最多保留两位小数，且尽量取整
+  Math.floor(((value - min) * 10000) / (max - min)) / 100 + '%';
 
 /**
  * 滑块handle
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap
index b29104e58..53b31778d 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap
@@ -109,6 +109,274 @@ exports[`Renderer:checkbox 1`] = `
       </div>
       
   
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:checkbox with checked 1`] = `
+<div>
+  <div
+    class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    style="position: relative;"
+  >
+    <div
+      class="cxd-Panel-heading"
+    >
+      <h3
+        class="cxd-Panel-title"
+      >
+        <span
+          class="cxd-TplField"
+        >
+          <span>
+            The form
+          </span>
+        </span>
+      </h3>
+    </div>
+    <div
+      class="cxd-Panel-body"
+    >
+      <form
+        class="cxd-Form cxd-Form--normal"
+        novalidate=""
+      >
+        <input
+          style="display: none;"
+          type="submit"
+        />
+        <div
+          class="cxd-Form-item cxd-Form-item--normal"
+          data-role="form-item"
+        >
+          <label
+            class="cxd-Form-label"
+          >
+            <span>
+              <span
+                class="cxd-TplField"
+              >
+                <span>
+                  Checkbox
+                </span>
+              </span>
+            </span>
+          </label>
+          <div
+            class="cxd-CheckboxControl cxd-Form-control"
+          >
+            <label
+              class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--full"
+            >
+              <input
+                checked=""
+                type="checkbox"
+              />
+              <i />
+              <span
+                class=""
+              >
+                <span
+                  class="cxd-TplField"
+                >
+                  <span>
+                    选项说明
+                  </span>
+                </span>
+              </span>
+            </label>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:checkbox with optionType 1`] = `
+<div>
+  <div
+    class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    style="position: relative;"
+  >
+    <div
+      class="cxd-Panel-heading"
+    >
+      <h3
+        class="cxd-Panel-title"
+      >
+        <span
+          class="cxd-TplField"
+        >
+          <span>
+            The form
+          </span>
+        </span>
+      </h3>
+    </div>
+    <div
+      class="cxd-Panel-body"
+    >
+      <form
+        class="cxd-Form cxd-Form--normal"
+        novalidate=""
+      >
+        <input
+          style="display: none;"
+          type="submit"
+        />
+        <div
+          class="cxd-Form-item cxd-Form-item--normal"
+          data-role="form-item"
+        >
+          <label
+            class="cxd-Form-label"
+          >
+            <span>
+              <span
+                class="cxd-TplField"
+              >
+                <span>
+                  Checkbox
+                </span>
+              </span>
+            </span>
+          </label>
+          <div
+            class="cxd-CheckboxControl cxd-Form-control"
+          >
+            <label
+              class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--full cxd-Checkbox--button cxd-Checkbox--button--checked"
+            >
+              <input
+                type="checkbox"
+              />
+              <i />
+              <span
+                class=""
+              >
+                <span
+                  class="cxd-TplField"
+                >
+                  <span>
+                    去吃饭
+                  </span>
+                </span>
+              </span>
+            </label>
+          </div>
+        </div>
+        <div
+          class="cxd-Form-item cxd-Form-item--normal"
+          data-role="form-item"
+        >
+          <label
+            class="cxd-Form-label"
+          >
+            <span>
+              <span
+                class="cxd-TplField"
+              >
+                <span>
+                  您吃了吗
+                </span>
+              </span>
+            </span>
+          </label>
+          <div
+            class="cxd-Form-static"
+          >
+            <div
+              class="cxd-Form-control"
+            >
+              <span
+                class="cxd-PlainField"
+              >
+                吃了
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
       <div
         class="resize-sensor-appear"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap
index 15c3905b0..504132fdd 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap
@@ -134,6 +134,863 @@ exports[`Renderer:number 1`] = `
       </div>
       
   
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:number with borderMode 1`] = `
+<div>
+  <div
+    class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    style="position: relative;"
+  >
+    <div
+      class="cxd-Panel-heading"
+    >
+      <h3
+        class="cxd-Panel-title"
+      >
+        <span
+          class="cxd-TplField"
+        >
+          <span>
+            表单
+          </span>
+        </span>
+      </h3>
+    </div>
+    <div
+      class="cxd-Panel-body"
+    >
+      <form
+        class="cxd-Form cxd-Form--normal"
+        novalidate=""
+      >
+        <input
+          style="display: none;"
+          type="submit"
+        />
+        <div
+          class="cxd-Form-item cxd-Form-item--normal"
+          data-role="form-item"
+        >
+          <label
+            class="cxd-Form-label"
+          >
+            <span>
+              <span
+                class="cxd-TplField"
+              >
+                <span>
+                  number
+                </span>
+              </span>
+            </span>
+          </label>
+          <div
+            class="cxd-NumberControl cxd-Form-control"
+          >
+            <div
+              class="cxd-Number cxd-Number--borderNone"
+            >
+              <div
+                class="cxd-Number-handler-wrap"
+              >
+                <span
+                  aria-disabled="false"
+                  aria-label="Increase Value"
+                  class="cxd-Number-handler cxd-Number-handler-up"
+                  role="button"
+                  unselectable="on"
+                >
+                  <span
+                    class="cxd-Number-handler-up-inner"
+                    unselectable="on"
+                  />
+                </span>
+                <span
+                  aria-disabled="false"
+                  aria-label="Decrease Value"
+                  class="cxd-Number-handler cxd-Number-handler-down"
+                  role="button"
+                  unselectable="on"
+                >
+                  <span
+                    class="cxd-Number-handler-down-inner"
+                    unselectable="on"
+                  />
+                </span>
+              </div>
+              <div
+                class="cxd-Number-input-wrap"
+              >
+                <input
+                  autocomplete="off"
+                  class="cxd-Number-input"
+                  role="spinbutton"
+                  step="1"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      class="cxd-Panel-footerWrap"
+    >
+      <div
+        class="cxd-Panel-btnToolbar cxd-Panel-footer"
+      >
+        <button
+          class="cxd-Button cxd-Button--primary"
+          type="submit"
+        >
+          <span>
+            提交
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:number with borderMode 2`] = `
+<div>
+  <div
+    class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    style="position: relative;"
+  >
+    <div
+      class="cxd-Panel-heading"
+    >
+      <h3
+        class="cxd-Panel-title"
+      >
+        <span
+          class="cxd-TplField"
+        >
+          <span>
+            表单
+          </span>
+        </span>
+      </h3>
+    </div>
+    <div
+      class="cxd-Panel-body"
+    >
+      <form
+        class="cxd-Form cxd-Form--normal"
+        novalidate=""
+      >
+        <input
+          style="display: none;"
+          type="submit"
+        />
+        <div
+          class="cxd-Form-item cxd-Form-item--normal"
+          data-role="form-item"
+        >
+          <label
+            class="cxd-Form-label"
+          >
+            <span>
+              <span
+                class="cxd-TplField"
+              >
+                <span>
+                  number
+                </span>
+              </span>
+            </span>
+          </label>
+          <div
+            class="cxd-NumberControl cxd-Form-control"
+          >
+            <div
+              class="cxd-Number cxd-Number--borderHalf"
+            >
+              <div
+                class="cxd-Number-handler-wrap"
+              >
+                <span
+                  aria-disabled="false"
+                  aria-label="Increase Value"
+                  class="cxd-Number-handler cxd-Number-handler-up"
+                  role="button"
+                  unselectable="on"
+                >
+                  <span
+                    class="cxd-Number-handler-up-inner"
+                    unselectable="on"
+                  />
+                </span>
+                <span
+                  aria-disabled="false"
+                  aria-label="Decrease Value"
+                  class="cxd-Number-handler cxd-Number-handler-down"
+                  role="button"
+                  unselectable="on"
+                >
+                  <span
+                    class="cxd-Number-handler-down-inner"
+                    unselectable="on"
+                  />
+                </span>
+              </div>
+              <div
+                class="cxd-Number-input-wrap"
+              >
+                <input
+                  autocomplete="off"
+                  class="cxd-Number-input"
+                  role="spinbutton"
+                  step="1"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      class="cxd-Panel-footerWrap"
+    >
+      <div
+        class="cxd-Panel-btnToolbar cxd-Panel-footer"
+      >
+        <button
+          class="cxd-Button cxd-Button--primary"
+          type="submit"
+        >
+          <span>
+            提交
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:number with prefix & suffix & kilobitSeparator 1`] = `
+<div>
+  <div
+    class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    style="position: relative;"
+  >
+    <div
+      class="cxd-Panel-heading"
+    >
+      <h3
+        class="cxd-Panel-title"
+      >
+        <span
+          class="cxd-TplField"
+        >
+          <span>
+            表单
+          </span>
+        </span>
+      </h3>
+    </div>
+    <div
+      class="cxd-Panel-body"
+    >
+      <form
+        class="cxd-Form cxd-Form--normal"
+        novalidate=""
+      >
+        <input
+          style="display: none;"
+          type="submit"
+        />
+        <div
+          class="cxd-Form-item cxd-Form-item--normal"
+          data-role="form-item"
+        >
+          <label
+            class="cxd-Form-label"
+          >
+            <span>
+              <span
+                class="cxd-TplField"
+              >
+                <span>
+                  number
+                </span>
+              </span>
+            </span>
+          </label>
+          <div
+            class="cxd-NumberControl cxd-Form-control"
+          >
+            <div
+              class="cxd-Number cxd-Number--borderFull"
+            >
+              <div
+                class="cxd-Number-handler-wrap"
+              >
+                <span
+                  aria-disabled="false"
+                  aria-label="Increase Value"
+                  class="cxd-Number-handler cxd-Number-handler-up"
+                  role="button"
+                  unselectable="on"
+                >
+                  <span
+                    class="cxd-Number-handler-up-inner"
+                    unselectable="on"
+                  />
+                </span>
+                <span
+                  aria-disabled="false"
+                  aria-label="Decrease Value"
+                  class="cxd-Number-handler cxd-Number-handler-down"
+                  role="button"
+                  unselectable="on"
+                >
+                  <span
+                    class="cxd-Number-handler-down-inner"
+                    unselectable="on"
+                  />
+                </span>
+              </div>
+              <div
+                class="cxd-Number-input-wrap"
+              >
+                <input
+                  aria-valuenow="123456"
+                  autocomplete="off"
+                  class="cxd-Number-input"
+                  role="spinbutton"
+                  step="1"
+                  value="$123,456%"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      class="cxd-Panel-footerWrap"
+    >
+      <div
+        class="cxd-Panel-btnToolbar cxd-Panel-footer"
+      >
+        <button
+          class="cxd-Button cxd-Button--primary"
+          type="submit"
+        >
+          <span>
+            提交
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:number with step & precision & displayMode & keyboard 1`] = `
+<div>
+  <div
+    class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    style="position: relative;"
+  >
+    <div
+      class="cxd-Panel-heading"
+    >
+      <h3
+        class="cxd-Panel-title"
+      >
+        <span
+          class="cxd-TplField"
+        >
+          <span>
+            表单
+          </span>
+        </span>
+      </h3>
+    </div>
+    <div
+      class="cxd-Panel-body"
+    >
+      <form
+        class="cxd-Form cxd-Form--normal"
+        novalidate=""
+      >
+        <input
+          style="display: none;"
+          type="submit"
+        />
+        <div
+          class="cxd-Form-item cxd-Form-item--normal"
+          data-role="form-item"
+        >
+          <label
+            class="cxd-Form-label"
+          >
+            <span>
+              <span
+                class="cxd-TplField"
+              >
+                <span>
+                  number
+                </span>
+              </span>
+            </span>
+          </label>
+          <div
+            class="cxd-NumberControl cxd-Form-control"
+          >
+            <div
+              class="cxd-Number--enhance cxd-Number--enhance-borderFull"
+            >
+              <div
+                class="cxd-Number--enhance-left-icon"
+              >
+                <icon-mock
+                  classname="icon icon-minus"
+                  icon="minus"
+                />
+              </div>
+              <div
+                class="cxd-Number cxd-Number--enhance-input cxd-Number--borderFull"
+              >
+                <div
+                  class="cxd-Number-handler-wrap"
+                >
+                  <span
+                    aria-disabled="false"
+                    aria-label="Increase Value"
+                    class="cxd-Number-handler cxd-Number-handler-up"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      class="cxd-Number-handler-up-inner"
+                      unselectable="on"
+                    />
+                  </span>
+                  <span
+                    aria-disabled="false"
+                    aria-label="Decrease Value"
+                    class="cxd-Number-handler cxd-Number-handler-down"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      class="cxd-Number-handler-down-inner"
+                      unselectable="on"
+                    />
+                  </span>
+                </div>
+                <div
+                  class="cxd-Number-input-wrap"
+                >
+                  <input
+                    aria-valuenow="14.111"
+                    autocomplete="off"
+                    class="cxd-Number-input"
+                    role="spinbutton"
+                    step="3"
+                    value="14.111"
+                  />
+                </div>
+              </div>
+              <div
+                class="cxd-Number--enhance-right-icon"
+              >
+                <icon-mock
+                  classname="icon  icon-plus"
+                  icon="plus"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      class="cxd-Panel-footerWrap"
+    >
+      <div
+        class="cxd-Panel-btnToolbar cxd-Panel-footer"
+      >
+        <button
+          class="cxd-Button cxd-Button--primary"
+          type="submit"
+        >
+          <span>
+            提交
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:number with unitOptions 1`] = `
+<div>
+  <div
+    class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    style="position: relative;"
+  >
+    <div
+      class="cxd-Panel-heading"
+    >
+      <h3
+        class="cxd-Panel-title"
+      >
+        <span
+          class="cxd-TplField"
+        >
+          <span>
+            表单
+          </span>
+        </span>
+      </h3>
+    </div>
+    <div
+      class="cxd-Panel-body"
+    >
+      <form
+        class="cxd-Form cxd-Form--normal"
+        novalidate=""
+      >
+        <input
+          style="display: none;"
+          type="submit"
+        />
+        <div
+          class="cxd-Form-item cxd-Form-item--normal"
+          data-role="form-item"
+        >
+          <label
+            class="cxd-Form-label"
+          >
+            <span>
+              <span
+                class="cxd-TplField"
+              >
+                <span>
+                  number
+                </span>
+              </span>
+            </span>
+          </label>
+          <div
+            class="cxd-NumberControl cxd-NumberControl--withUnit cxd-Form-control"
+          >
+            <div
+              class="cxd-Number cxd-Number--borderFull"
+            >
+              <div
+                class="cxd-Number-handler-wrap"
+              >
+                <span
+                  aria-disabled="false"
+                  aria-label="Increase Value"
+                  class="cxd-Number-handler cxd-Number-handler-up"
+                  role="button"
+                  unselectable="on"
+                >
+                  <span
+                    class="cxd-Number-handler-up-inner"
+                    unselectable="on"
+                  />
+                </span>
+                <span
+                  aria-disabled="false"
+                  aria-label="Decrease Value"
+                  class="cxd-Number-handler cxd-Number-handler-down"
+                  role="button"
+                  unselectable="on"
+                >
+                  <span
+                    class="cxd-Number-handler-down-inner"
+                    unselectable="on"
+                  />
+                </span>
+              </div>
+              <div
+                class="cxd-Number-input-wrap"
+              >
+                <input
+                  aria-valuenow="99"
+                  autocomplete="off"
+                  class="cxd-Number-input"
+                  role="spinbutton"
+                  step="1"
+                  value="99"
+                />
+              </div>
+            </div>
+            <div
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-labelledby="downshift-0-label"
+              class="cxd-Select"
+              role="combobox"
+              tabindex="0"
+            >
+              <div
+                class="cxd-Select-valueWrap"
+              >
+                <div
+                  class="cxd-Select-value"
+                >
+                  em
+                </div>
+              </div>
+              <span
+                class="cxd-Select-arrow"
+              >
+                <icon-mock
+                  classname="icon icon-right-arrow-bold"
+                  icon="right-arrow-bold"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="cxd-Form-item cxd-Form-item--normal"
+          data-role="form-item"
+        >
+          <div
+            class="cxd-Form-static"
+          >
+            <div
+              class="cxd-Form-control"
+            >
+              <span
+                class="cxd-PlainField"
+              >
+                99em
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      class="cxd-Panel-footerWrap"
+    >
+      <div
+        class="cxd-Panel-btnToolbar cxd-Panel-footer"
+      >
+        <button
+          class="cxd-Button cxd-Button--primary"
+          type="submit"
+        >
+          <span>
+            提交
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
       <div
         class="resize-sensor-appear"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap
index 4c4bb4011..9e9ac32d4 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap
@@ -1,261 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Renderer:range 1`] = `
-<div>
-  <div
-    class="cxd-Panel cxd-Panel--default cxd-Panel--form"
-    style="position: relative;"
-  >
-    <div
-      class="cxd-Panel-heading"
-    >
-      <h3
-        class="cxd-Panel-title"
-      >
-        <span
-          class="cxd-TplField"
-        >
-          <span>
-            The form
-          </span>
-        </span>
-      </h3>
-    </div>
-    <div
-      class="cxd-Panel-body"
-    >
-      <form
-        class="cxd-Form cxd-Form--normal"
-        novalidate=""
-      >
-        <input
-          style="display: none;"
-          type="submit"
-        />
-        <div
-          class="cxd-Form-item cxd-Form-item--normal"
-          data-role="form-item"
-        >
-          <div
-            class="cxd-RangeControl cxd-InputRange cxd-Form-control"
-          >
-            <div
-              class="cxd-InputRange-wrap"
-            >
-              <div
-                class="cxd-InputRange-track cxd-InputRange-track--background"
-              >
-                <div
-                  class="cxd-InputRange-track-active"
-                  style="width: 7%; left: 0%;"
-                />
-                <div
-                  class="cxd-InputRange-handle"
-                  style="left: 7%; z-index: 1; position: relative;"
-                >
-                  <div
-                    class="cxd-InputRange-handle-icon"
-                  >
-                    <icon-mock
-                      classname="icon icon-slider-handle"
-                      icon="slider-handle"
-                    />
-                  </div>
-                  <div
-                    class="cxd-InputRange-label pos-top"
-                    style="position: relative;"
-                  >
-                    <span>
-                      7
-                    </span>
-                    <div
-                      class="resize-sensor"
-                      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
-                    >
-                      
-  
-                      <div
-                        class="resize-sensor-expand"
-                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
-                      >
-                        
-    
-                        <div
-                          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
-                        />
-                        
-  
-                      </div>
-                      
-  
-                      <div
-                        class="resize-sensor-shrink"
-                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
-                      >
-                        
-    
-                        <div
-                          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
-                        />
-                        
-  
-                      </div>
-                      
-  
-                      <div
-                        class="resize-sensor-appear"
-                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="resize-sensor"
-                    style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
-                  >
-                    
-  
-                    <div
-                      class="resize-sensor-expand"
-                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
-                    >
-                      
-    
-                      <div
-                        style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
-                      />
-                      
-  
-                    </div>
-                    
-  
-                    <div
-                      class="resize-sensor-shrink"
-                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
-                    >
-                      
-    
-                      <div
-                        style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
-                      />
-                      
-  
-                    </div>
-                    
-  
-                    <div
-                      class="resize-sensor-appear"
-                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="cxd-InputRange-input"
-            >
-              <div
-                class="cxd-Number cxd-Number--borderFull"
-              >
-                <div
-                  class="cxd-Number-handler-wrap"
-                >
-                  <span
-                    aria-disabled="false"
-                    aria-label="Increase Value"
-                    class="cxd-Number-handler cxd-Number-handler-up"
-                    role="button"
-                    unselectable="on"
-                  >
-                    <span
-                      class="cxd-Number-handler-up-inner"
-                      unselectable="on"
-                    />
-                  </span>
-                  <span
-                    aria-disabled="false"
-                    aria-label="Decrease Value"
-                    class="cxd-Number-handler cxd-Number-handler-down"
-                    role="button"
-                    unselectable="on"
-                  >
-                    <span
-                      class="cxd-Number-handler-down-inner"
-                      unselectable="on"
-                    />
-                  </span>
-                </div>
-                <div
-                  class="cxd-Number-input-wrap"
-                >
-                  <input
-                    aria-valuemax="100"
-                    aria-valuemin="0"
-                    aria-valuenow="7"
-                    autocomplete="off"
-                    class="cxd-Number-input"
-                    role="spinbutton"
-                    step="1"
-                    value="7"
-                  />
-                </div>
-              </div>
-            </div>
-            <a
-              class="cxd-InputRange-clear is-active"
-            >
-              <icon-mock
-                classname="icon icon-close"
-                icon="close"
-              />
-            </a>
-          </div>
-        </div>
-      </form>
-    </div>
-    <div
-      class="resize-sensor"
-      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
-    >
-      
-  
-      <div
-        class="resize-sensor-expand"
-        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
-      >
-        
-    
-        <div
-          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
-        />
-        
-  
-      </div>
-      
-  
-      <div
-        class="resize-sensor-shrink"
-        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
-      >
-        
-    
-        <div
-          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
-        />
-        
-  
-      </div>
-      
-  
-      <div
-        class="resize-sensor-appear"
-        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Renderer:range:marks 1`] = `
+exports[`Renderer:range with marks 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
@@ -431,13 +176,6 @@ exports[`Renderer:range:marks 1`] = `
                       0
                     </span>
                   </div>
-                  <div
-                    style="left: 100%;"
-                  >
-                    <span>
-                      100
-                    </span>
-                  </div>
                   <div
                     style="left: 20%;"
                   >
@@ -466,6 +204,13 @@ exports[`Renderer:range:marks 1`] = `
                       80Mbps
                     </span>
                   </div>
+                  <div
+                    style="left: 100%;"
+                  >
+                    <span>
+                      100
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -516,7 +261,423 @@ exports[`Renderer:range:marks 1`] = `
 </div>
 `;
 
-exports[`Renderer:range:multiple 1`] = `
+exports[`Renderer:range with min & max & step & joinValues 1`] = `
+<div>
+  <div
+    class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    style="position: relative;"
+  >
+    <div
+      class="cxd-Panel-heading"
+    >
+      <h3
+        class="cxd-Panel-title"
+      >
+        <span
+          class="cxd-TplField"
+        >
+          <span>
+            The form
+          </span>
+        </span>
+      </h3>
+    </div>
+    <div
+      class="cxd-Panel-body"
+    >
+      <form
+        class="cxd-Form cxd-Form--normal"
+        novalidate=""
+      >
+        <input
+          style="display: none;"
+          type="submit"
+        />
+        <pre>
+          <code
+            class="cxd-Form--debug"
+          >
+            {
+  "range": {
+    "min": 0.2,
+    "max": 0.8
+  }
+}
+          </code>
+        </pre>
+        <div
+          class="cxd-Form-item cxd-Form-item--normal"
+          data-role="form-item"
+        >
+          <div
+            class="cxd-RangeControl cxd-InputRange cxd-Form-control"
+          >
+            <div
+              class="cxd-InputRange-input"
+            >
+              <div
+                class="cxd-Number cxd-Number--borderFull"
+              >
+                <div
+                  class="cxd-Number-handler-wrap"
+                >
+                  <span
+                    aria-disabled="false"
+                    aria-label="Increase Value"
+                    class="cxd-Number-handler cxd-Number-handler-up"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      class="cxd-Number-handler-up-inner"
+                      unselectable="on"
+                    />
+                  </span>
+                  <span
+                    aria-disabled="false"
+                    aria-label="Decrease Value"
+                    class="cxd-Number-handler cxd-Number-handler-down"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      class="cxd-Number-handler-down-inner"
+                      unselectable="on"
+                    />
+                  </span>
+                </div>
+                <div
+                  class="cxd-Number-input-wrap"
+                >
+                  <input
+                    aria-valuemax="1"
+                    aria-valuemin="0"
+                    aria-valuenow="0.2"
+                    autocomplete="off"
+                    class="cxd-Number-input"
+                    role="spinbutton"
+                    step="0.1"
+                    value="0.2"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="cxd-InputRange-wrap"
+            >
+              <div
+                class="cxd-InputRange-track cxd-InputRange-track--background"
+              >
+                <div
+                  class="cxd-InputRange-track-active"
+                  style="width: 60%; left: 20%;"
+                />
+                <div
+                  class="cxd-InputRange-handle"
+                  style="left: 20%; z-index: 1; position: relative;"
+                >
+                  <div
+                    class="cxd-InputRange-handle-icon"
+                  >
+                    <icon-mock
+                      classname="icon icon-slider-handle"
+                      icon="slider-handle"
+                    />
+                  </div>
+                  <div
+                    class="cxd-InputRange-label pos-top"
+                    style="position: relative;"
+                  >
+                    <span>
+                      0.2
+                    </span>
+                    <div
+                      class="resize-sensor"
+                      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+                    >
+                      
+  
+                      <div
+                        class="resize-sensor-expand"
+                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                      >
+                        
+    
+                        <div
+                          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                        />
+                        
+  
+                      </div>
+                      
+  
+                      <div
+                        class="resize-sensor-shrink"
+                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                      >
+                        
+    
+                        <div
+                          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                        />
+                        
+  
+                      </div>
+                      
+  
+                      <div
+                        class="resize-sensor-appear"
+                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="resize-sensor"
+                    style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+                  >
+                    
+  
+                    <div
+                      class="resize-sensor-expand"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                    >
+                      
+    
+                      <div
+                        style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                      />
+                      
+  
+                    </div>
+                    
+  
+                    <div
+                      class="resize-sensor-shrink"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                    >
+                      
+    
+                      <div
+                        style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                      />
+                      
+  
+                    </div>
+                    
+  
+                    <div
+                      class="resize-sensor-appear"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="cxd-InputRange-handle"
+                  style="left: 80%; z-index: 1; position: relative;"
+                >
+                  <div
+                    class="cxd-InputRange-handle-icon"
+                  >
+                    <icon-mock
+                      classname="icon icon-slider-handle"
+                      icon="slider-handle"
+                    />
+                  </div>
+                  <div
+                    class="cxd-InputRange-label pos-top"
+                    style="position: relative;"
+                  >
+                    <span>
+                      0.8
+                    </span>
+                    <div
+                      class="resize-sensor"
+                      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+                    >
+                      
+  
+                      <div
+                        class="resize-sensor-expand"
+                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                      >
+                        
+    
+                        <div
+                          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                        />
+                        
+  
+                      </div>
+                      
+  
+                      <div
+                        class="resize-sensor-shrink"
+                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                      >
+                        
+    
+                        <div
+                          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                        />
+                        
+  
+                      </div>
+                      
+  
+                      <div
+                        class="resize-sensor-appear"
+                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="resize-sensor"
+                    style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+                  >
+                    
+  
+                    <div
+                      class="resize-sensor-expand"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                    >
+                      
+    
+                      <div
+                        style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                      />
+                      
+  
+                    </div>
+                    
+  
+                    <div
+                      class="resize-sensor-shrink"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                    >
+                      
+    
+                      <div
+                        style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                      />
+                      
+  
+                    </div>
+                    
+  
+                    <div
+                      class="resize-sensor-appear"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="cxd-InputRange-input"
+            >
+              <div
+                class="cxd-Number cxd-Number--borderFull"
+              >
+                <div
+                  class="cxd-Number-handler-wrap"
+                >
+                  <span
+                    aria-disabled="false"
+                    aria-label="Increase Value"
+                    class="cxd-Number-handler cxd-Number-handler-up"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      class="cxd-Number-handler-up-inner"
+                      unselectable="on"
+                    />
+                  </span>
+                  <span
+                    aria-disabled="false"
+                    aria-label="Decrease Value"
+                    class="cxd-Number-handler cxd-Number-handler-down"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      class="cxd-Number-handler-down-inner"
+                      unselectable="on"
+                    />
+                  </span>
+                </div>
+                <div
+                  class="cxd-Number-input-wrap"
+                >
+                  <input
+                    aria-valuemax="1"
+                    aria-valuemin="0"
+                    aria-valuenow="0.8"
+                    autocomplete="off"
+                    class="cxd-Number-input"
+                    role="spinbutton"
+                    step="0.1"
+                    value="0.8"
+                  />
+                </div>
+              </div>
+            </div>
+            <a
+              class="cxd-InputRange-clear"
+            >
+              <icon-mock
+                classname="icon icon-close"
+                icon="close"
+              />
+            </a>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:range with multiple & clearable & delimiter 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
@@ -865,8 +1026,273 @@ exports[`Renderer:range:multiple 1`] = `
                 </div>
               </div>
             </div>
+          </div>
+        </div>
+        <div
+          class="cxd-Form-item cxd-Form-item--normal"
+          data-role="form-item"
+        >
+          <div
+            class="cxd-Form-static"
+          >
+            <div
+              class="cxd-Form-control"
+            >
+              <span
+                class="cxd-PlainField"
+              >
+                7--13
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:range with showInput 1`] = `
+<div>
+  <div
+    class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    style="position: relative;"
+  >
+    <div
+      class="cxd-Panel-heading"
+    >
+      <h3
+        class="cxd-Panel-title"
+      >
+        <span
+          class="cxd-TplField"
+        >
+          <span>
+            The form
+          </span>
+        </span>
+      </h3>
+    </div>
+    <div
+      class="cxd-Panel-body"
+    >
+      <form
+        class="cxd-Form cxd-Form--normal"
+        novalidate=""
+      >
+        <input
+          style="display: none;"
+          type="submit"
+        />
+        <div
+          class="cxd-Form-item cxd-Form-item--normal"
+          data-role="form-item"
+        >
+          <div
+            class="cxd-RangeControl cxd-InputRange cxd-Form-control"
+          >
+            <div
+              class="cxd-InputRange-wrap"
+            >
+              <div
+                class="cxd-InputRange-track cxd-InputRange-track--background"
+              >
+                <div
+                  class="cxd-InputRange-track-active"
+                  style="width: 7%; left: 0%;"
+                />
+                <div
+                  class="cxd-InputRange-handle"
+                  style="left: 7%; z-index: 1; position: relative;"
+                >
+                  <div
+                    class="cxd-InputRange-handle-icon"
+                  >
+                    <icon-mock
+                      classname="icon icon-slider-handle"
+                      icon="slider-handle"
+                    />
+                  </div>
+                  <div
+                    class="cxd-InputRange-label pos-top"
+                    style="position: relative;"
+                  >
+                    <span>
+                      7
+                    </span>
+                    <div
+                      class="resize-sensor"
+                      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+                    >
+                      
+  
+                      <div
+                        class="resize-sensor-expand"
+                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                      >
+                        
+    
+                        <div
+                          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                        />
+                        
+  
+                      </div>
+                      
+  
+                      <div
+                        class="resize-sensor-shrink"
+                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                      >
+                        
+    
+                        <div
+                          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                        />
+                        
+  
+                      </div>
+                      
+  
+                      <div
+                        class="resize-sensor-appear"
+                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="resize-sensor"
+                    style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+                  >
+                    
+  
+                    <div
+                      class="resize-sensor-expand"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                    >
+                      
+    
+                      <div
+                        style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                      />
+                      
+  
+                    </div>
+                    
+  
+                    <div
+                      class="resize-sensor-shrink"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+                    >
+                      
+    
+                      <div
+                        style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                      />
+                      
+  
+                    </div>
+                    
+  
+                    <div
+                      class="resize-sensor-appear"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="cxd-InputRange-input"
+            >
+              <div
+                class="cxd-Number cxd-Number--borderFull"
+              >
+                <div
+                  class="cxd-Number-handler-wrap"
+                >
+                  <span
+                    aria-disabled="false"
+                    aria-label="Increase Value"
+                    class="cxd-Number-handler cxd-Number-handler-up"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      class="cxd-Number-handler-up-inner"
+                      unselectable="on"
+                    />
+                  </span>
+                  <span
+                    aria-disabled="false"
+                    aria-label="Decrease Value"
+                    class="cxd-Number-handler cxd-Number-handler-down"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      class="cxd-Number-handler-down-inner"
+                      unselectable="on"
+                    />
+                  </span>
+                </div>
+                <div
+                  class="cxd-Number-input-wrap"
+                >
+                  <input
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    aria-valuenow="7"
+                    autocomplete="off"
+                    class="cxd-Number-input"
+                    role="spinbutton"
+                    step="1"
+                    value="7"
+                  />
+                </div>
+              </div>
+            </div>
             <a
-              class="cxd-InputRange-clear"
+              class="cxd-InputRange-clear is-active"
             >
               <icon-mock
                 classname="icon icon-close"
@@ -920,7 +1346,7 @@ exports[`Renderer:range:multiple 1`] = `
 </div>
 `;
 
-exports[`Renderer:range:showSteps 1`] = `
+exports[`Renderer:range with showSteps 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
@@ -1213,7 +1639,7 @@ exports[`Renderer:range:showSteps 1`] = `
 </div>
 `;
 
-exports[`Renderer:range:tooltipVisible 1`] = `
+exports[`Renderer:range with tooltipVisible & tooltipPlacement 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
@@ -1260,11 +1686,11 @@ exports[`Renderer:range:tooltipVisible 1`] = `
               >
                 <div
                   class="cxd-InputRange-track-active"
-                  style="width: 0%; left: 0%;"
+                  style="width: 41%; left: 0%;"
                 />
                 <div
                   class="cxd-InputRange-handle"
-                  style="left: 0%; z-index: 1; position: relative;"
+                  style="left: 41%; z-index: 1; position: relative;"
                 >
                   <div
                     class="cxd-InputRange-handle-icon"
@@ -1279,7 +1705,7 @@ exports[`Renderer:range:tooltipVisible 1`] = `
                     style="position: relative;"
                   >
                     <span>
-                      0
+                      41
                     </span>
                     <div
                       class="resize-sensor"
diff --git a/packages/amis/__tests__/renderers/Form/checkbox.test.tsx b/packages/amis/__tests__/renderers/Form/checkbox.test.tsx
index 8f690e570..62fa59567 100644
--- a/packages/amis/__tests__/renderers/Form/checkbox.test.tsx
+++ b/packages/amis/__tests__/renderers/Form/checkbox.test.tsx
@@ -1,8 +1,8 @@
 import React = require('react');
-import {render, cleanup, fireEvent} from '@testing-library/react';
+import {render, cleanup, fireEvent, waitFor} from '@testing-library/react';
 import '../../../src';
 import {render as amisRender} from '../../../src';
-import {makeEnv} from '../../helper';
+import {makeEnv, wait} from '../../helper';
 import {clearStoresCache} from '../../../src';
 
 afterEach(() => {
@@ -35,3 +35,89 @@ test('Renderer:checkbox', async () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+test('Renderer:checkbox with optionType', async () => {
+  const {container, getByText} = render(
+    amisRender(
+      {
+        type: 'form',
+        title: 'The form',
+        controls: [
+          {
+            name: 'checkbox',
+            type: 'checkbox',
+            label: 'Checkbox',
+            option: '去吃饭',
+            trueValue: '吃了',
+            falseValue: '没吃呢',
+            optionType: 'button',
+            value: '没吃呢'
+          },
+          {
+            type: 'static',
+            label: '您吃了吗',
+            name: 'checkbox'
+          }
+        ],
+        submitText: null,
+        actions: []
+      },
+      {},
+      makeEnv()
+    )
+  );
+
+  await wait(300);
+
+  expect(
+    container.querySelector('.cxd-Checkbox.cxd-Checkbox--button') as Element
+  ).toBeInTheDocument();
+
+
+  fireEvent.click(getByText(/去吃饭/));
+
+  await waitFor(() => {
+    expect(
+      (container.querySelector('.cxd-PlainField') as Element).innerHTML
+    ).toBe('吃了');
+
+    expect(
+      container.querySelector('.cxd-Checkbox.cxd-Checkbox--button.cxd-Checkbox--button--checked') as Element
+    ).toBeInTheDocument();
+  });
+
+  expect(container).toMatchSnapshot();
+});
+
+
+test('Renderer:checkbox with checked', async () => {
+  const {container, getByText} = render(
+    amisRender(
+      {
+        type: 'form',
+        title: 'The form',
+        controls: [
+          {
+            name: 'checkbox',
+            type: 'checkbox',
+            label: 'Checkbox',
+            option: '选项说明',
+            checked: true
+          }
+        ],
+        submitText: null,
+        actions: []
+      },
+      {},
+      makeEnv()
+    )
+  );
+
+  await wait(300);
+
+  expect(
+    container.querySelector('.cxd-Checkbox input[checked]') as Element
+  ).toBeInTheDocument();
+
+  expect(container).toMatchSnapshot();
+});
diff --git a/packages/amis/__tests__/renderers/Form/number.test.tsx b/packages/amis/__tests__/renderers/Form/number.test.tsx
index 40d491228..2a378e15b 100644
--- a/packages/amis/__tests__/renderers/Form/number.test.tsx
+++ b/packages/amis/__tests__/renderers/Form/number.test.tsx
@@ -1,9 +1,66 @@
 import React = require('react');
-import {render, fireEvent} from '@testing-library/react';
+import {render, fireEvent, waitFor} from '@testing-library/react';
 import '../../../src';
 import {render as amisRender} from '../../../src';
 import {makeEnv, wait} from '../../helper';
 
+const setup = async (
+  inputOptions: any = {},
+  formOptions: any = {},
+  formItems: any[] = [{}]
+) => {
+  const utils = render(
+    amisRender(
+      {
+        type: 'form',
+        api: '/api/mock2/form/saveForm',
+        body: [
+          {
+            name: 'number',
+            label: 'number',
+            type: 'input-number',
+            changeImmediately: true,
+            ...inputOptions
+          },
+          ...formItems
+        ],
+        ...formOptions
+      },
+      {},
+      makeEnv()
+    )
+  );
+
+  await waitFor(() => {
+    expect(
+      utils.container.querySelector('.cxd-Number-input-wrap input')
+    ).toBeInTheDocument();
+
+    expect(
+      utils.container.querySelector('button[type="submit"]')
+    ).toBeInTheDocument();
+  });
+
+  const input = utils.container.querySelector(
+    '.cxd-Number-input-wrap input'
+  ) as HTMLInputElement;
+
+  const wrap = utils.container.querySelector(
+    '.cxd-Number-input-wrap'
+  ) as HTMLInputElement;
+
+  const submitBtn = utils.container.querySelector(
+    'button[type="submit"]'
+  ) as HTMLElement;
+
+  return {
+    input,
+    submitBtn,
+    wrap,
+    ...utils
+  };
+};
+
 test('Renderer:number', async () => {
   const {container} = render(
     amisRender(
@@ -38,3 +95,127 @@ test('Renderer:number', async () => {
 
   expect(container).toMatchSnapshot();
 });
+
+test('Renderer:number with min & max', async () => {
+  const {input, wrap, container} = await setup({
+    min: 5,
+    max: 10
+  });
+
+  fireEvent.click(wrap);
+  await wait(300);
+  fireEvent.change(input, {target: {value: 6}});
+  fireEvent.blur(input);
+  await wait(300);
+  expect(input.value).toEqual('6');
+
+  fireEvent.click(wrap);
+  await wait(300);
+  fireEvent.change(input, {target: {value: 2}});
+  fireEvent.blur(input);
+  await wait(300);
+  expect(input.value).toEqual('5');
+
+  fireEvent.click(wrap);
+  await wait(300);
+  fireEvent.change(input, {target: {value: 12}});
+  fireEvent.blur(input);
+  await wait(300);
+  expect(input.value).toEqual('10');
+});
+
+test('Renderer:number with prefix & suffix & kilobitSeparator', async () => {
+  const {input, container} = await setup({
+    prefix: '$',
+    suffix: '%',
+    kilobitSeparator: true,
+    value: '123456'
+  });
+
+  expect(input.value).toEqual('$123,456%');
+  expect(container).toMatchSnapshot();
+});
+
+test('Renderer:number with unitOptions', async () => {
+  const {input, wrap, container, getByText} = await setup(
+    {
+      unitOptions: ['px', '%', 'em']
+    },
+    {},
+    [
+      {
+        type: 'static',
+        name: 'number'
+      }
+    ]
+  );
+
+  const staticDom = container.querySelector('.cxd-PlainField') as Element;
+
+  expect(staticDom.innerHTML).toBe('<span class="text-muted">-</span>');
+
+  fireEvent.click(wrap);
+  await wait(300);
+  fireEvent.change(input, {target: {value: 99}});
+  fireEvent.blur(input);
+  await wait(300);
+  expect(staticDom.innerHTML).toBe('99px');
+
+  fireEvent.click(container.querySelector('.cxd-Select') as Element);
+  fireEvent.click(getByText(/em/));
+  await wait(300);
+  expect(staticDom.innerHTML).toBe('99em');
+
+  expect(container).toMatchSnapshot();
+});
+
+test('Renderer:number with step & precision & displayMode & keyboard', async () => {
+  const {input, wrap, container, getByText} = await setup({
+    step: 3,
+    precision: 3,
+    displayMode: 'enhance'
+  });
+
+  const rightBtn = container.querySelector(
+    '.cxd-Number--enhance-right-icon'
+  ) as Element;
+
+  fireEvent.click(wrap);
+  await wait(300);
+  fireEvent.change(input, {target: {value: 11.111111}});
+  fireEvent.blur(input);
+  await wait(300);
+  expect(input.value).toBe('11.111');
+
+  fireEvent.click(rightBtn);
+  await wait(300);
+  expect(input.value).toBe('14.111');
+
+  // rc-input-number 中 keyDown 使用 which 判断 keyCode，当前环境此字段为空，无法响应
+  // fireEvent.focus(input);
+  // await wait(300);
+  // fireEvent.keyDown(input, {key: 'ArrowUp', code: 38});
+  // await wait(300);
+  // expect(input.value).toBe('17.111');
+
+  expect(container).toMatchSnapshot();
+});
+
+test('Renderer:number with borderMode', async () => {
+  const {container: noBorder} = await setup({
+    borderMode: 'none'
+  });
+  const {container: halfBorder} = await setup({
+    borderMode: 'half'
+  });
+
+  expect(
+    noBorder.querySelector('.cxd-Number.cxd-Number--borderNone') as Element
+  ).toBeInTheDocument();
+  expect(
+    halfBorder.querySelector('.cxd-Number.cxd-Number--borderHalf') as Element
+  ).toBeInTheDocument();
+
+  expect(noBorder).toMatchSnapshot();
+  expect(halfBorder).toMatchSnapshot();
+});
diff --git a/packages/amis/__tests__/renderers/Form/range.test.tsx b/packages/amis/__tests__/renderers/Form/range.test.tsx
index 94fc439d5..4d99b9ef8 100644
--- a/packages/amis/__tests__/renderers/Form/range.test.tsx
+++ b/packages/amis/__tests__/renderers/Form/range.test.tsx
@@ -4,7 +4,7 @@ import '../../../src';
 import {render as amisRender} from '../../../src';
 import {makeEnv, wait} from '../../helper';
 
-test('Renderer:range', async () => {
+test('Renderer:range with showInput', async () => {
   const {container} = render(
     amisRender(
       {
@@ -34,6 +34,10 @@ test('Renderer:range', async () => {
   });
   fireEvent.mouseUp(slider);
 
+  expect(
+    container.querySelector('.cxd-InputRange-input') as Element
+  ).toBeInTheDocument();
+
   const input = container.querySelector('.cxd-InputRange-input input');
   fireEvent.change(input!, {
     target: {
@@ -42,10 +46,16 @@ test('Renderer:range', async () => {
   });
   await wait(200);
 
+  expect(
+    (
+      container.querySelector('.cxd-InputRange-track-active') as Element
+    ).getAttribute('style')
+  ).toContain('width: 7%');
+
   expect(container).toMatchSnapshot();
 });
 
-test('Renderer:range:multiple', async () => {
+test('Renderer:range with multiple & clearable & delimiter', async () => {
   const {container} = render(
     amisRender(
       {
@@ -56,8 +66,14 @@ test('Renderer:range:multiple', async () => {
             type: 'input-range',
             name: 'range',
             multiple: true,
-            value: [10, 20],
-            showInput: true
+            delimiter: '--',
+            value: '10--20',
+            showInput: true,
+            clearable: false
+          },
+          {
+            type: 'static',
+            name: 'range'
           }
         ],
         title: 'The form',
@@ -68,6 +84,10 @@ test('Renderer:range:multiple', async () => {
     )
   );
 
+  expect(
+    container.querySelector('.cxd-InputRange-clear')
+  ).not.toBeInTheDocument();
+
   const inputs = container.querySelectorAll('.cxd-InputRange-input input');
   fireEvent.change(inputs[0], {
     target: {
@@ -81,15 +101,26 @@ test('Renderer:range:multiple', async () => {
     }
   });
   fireEvent.blur(inputs[1]);
-  const close = container.querySelector('a.cxd-InputRange-clear');
-  fireEvent.click(close!);
 
   await wait(200);
+  expect(
+    (
+      container.querySelector('.cxd-InputRange-track-active') as Element
+    ).getAttribute('style')
+  ).toBe('width: 6%; left: 7%;');
+
+  const icons = container.querySelectorAll('.cxd-InputRange-handle');
+  expect(icons[0].getAttribute('style')).toContain('left: 7%;');
+  expect(icons[1].getAttribute('style')).toContain('left: 13%;');
+
+  expect(
+    (container.querySelector('.cxd-PlainField') as Element).innerHTML
+  ).toBe('7--13');
 
   expect(container).toMatchSnapshot();
 });
 
-test('Renderer:range:showSteps', async () => {
+test('Renderer:range with showSteps', async () => {
   const {container} = render(
     amisRender(
       {
@@ -113,10 +144,16 @@ test('Renderer:range:showSteps', async () => {
   );
 
   await wait(200);
+
+  const dots = container.querySelectorAll('.cxd-InputRange-track-dot');
+
+  expect(dots.length).toBe(9);
+  expect(dots[8].getAttribute('style')).toContain('left: 90%;');
+
   expect(container).toMatchSnapshot();
 });
 
-test('Renderer:range:marks', async () => {
+test('Renderer:range with marks', async () => {
   const {container} = render(
     amisRender(
       {
@@ -133,7 +170,7 @@ test('Renderer:range:marks', async () => {
               '40%': '40Mbps',
               '60%': '60Mbps',
               '80%': '80Mbps',
-              '100': '100'
+              '100%': '100'
             }
           }
         ],
@@ -146,10 +183,17 @@ test('Renderer:range:marks', async () => {
   );
 
   await wait(200);
+
+  const marks = container.querySelectorAll('.cxd-InputRange-marks > div');
+
+  expect(marks.length).toBe(6);
+  expect(marks[3].innerHTML).toBe('<span>60Mbps</span>');
+  expect(marks[3].getAttribute('style')).toContain('left: 60%;');
+
   expect(container).toMatchSnapshot();
 });
 
-test('Renderer:range:tooltipVisible', async () => {
+test('Renderer:range with tooltipVisible & tooltipPlacement', async () => {
   const {container} = render(
     amisRender(
       {
@@ -160,7 +204,8 @@ test('Renderer:range:tooltipVisible', async () => {
             type: 'input-range',
             name: 'range',
             tooltipVisible: true,
-            tooltipPlacement: 'right'
+            tooltipPlacement: 'right',
+            value: 41
           }
         ],
         title: 'The form',
@@ -172,5 +217,76 @@ test('Renderer:range:tooltipVisible', async () => {
   );
 
   await wait(200);
+
+  expect(
+    container.querySelector(
+      '.cxd-InputRange-label.pos-right.cxd-InputRange-label-visible'
+    )
+  ).toBeInTheDocument();
+
+  const labelSpan = container.querySelector('.cxd-InputRange-label span');
+  expect(labelSpan).toBeI;
+
+  expect(labelSpan!.innerHTML).toBe('41');
+
+  expect(container).toMatchSnapshot();
+});
+
+test('Renderer:range with min & max & step & joinValues', async () => {
+  const {container} = render(
+    amisRender(
+      {
+        type: 'form',
+        debug: true,
+        api: '/api/xxx',
+        controls: [
+          {
+            type: 'input-range',
+            name: 'range',
+            min: 0,
+            max: 1,
+            step: 0.1,
+            multiple: true,
+            showInput: true,
+            joinValues: false
+          }
+        ],
+        title: 'The form',
+        actions: []
+      },
+      {},
+      makeEnv({})
+    )
+  );
+
+  const inputs = container.querySelectorAll('.cxd-InputRange-input input');
+  fireEvent.change(inputs[0], {
+    target: {
+      value: '0.2'
+    }
+  });
+  fireEvent.blur(inputs[0]);
+  fireEvent.change(inputs[1], {
+    target: {
+      value: '0.8'
+    }
+  });
+  fireEvent.blur(inputs[1]);
+
+  await wait(200);
+  expect(
+    (
+      container.querySelector('.cxd-InputRange-track-active') as Element
+    ).getAttribute('style')
+  ).toContain('width: 60%; left: 20%;');
+
+  expect((container.querySelector('.cxd-Form--debug') as Element).innerHTML)
+    .toBe(`{
+  "range": {
+    "min": 0.2,
+    "max": 0.8
+  }
+}`);
+
   expect(container).toMatchSnapshot();
 });