docs(slider): add max

Author: koory1st

docs/src/lib/i18n/zh/slider.js

@@ -7,4 +7,14 @@ export default {
   cslider03010: '离散值',
   cslider03020: '选项可以是离散的',
   cslider03030: '改变step的值可以改变步长， 通过设置 showStops 属性可以显示间断点',
+  cslider04010: '带有输入框的滑块',
+  cslider04020: '通过输入框输入来改变当前的值。',
+  cslider04030: '设置 showInput 属性会在右侧显示一个输入框',
+  cslider05010: '不同尺寸',
+  cslider06010: '位置',
+  cslider06020: '设置 showInput 属性会在右侧显示一个输入框',
+  cslider07010: '范围选择',
+  cslider07020: '你还可以选择一个范围值',
+  cslider07030:
+    '配置 range 属性以激活范围选择模式，该属性的绑定值是一个数组，由最小边界值和最大边界值组成。',
 };

docs/src/routes/component/slider/+page.svelte

@@ -13,6 +13,17 @@
   const formatTooltip = (val) => {
     return val / 100;
   };
+  let value2_1 = 0;
+  let value2_2 = 0;
+  let value3_1 = 0;
+  let value4_1 = 0;
+  let value4_2 = 0;
+  let value4_3 = 0;
+  let value5_1 = 0;
+  let value5_2 = 0;
+  let value5_3 = 0;
+  let value5_4 = 0;
+  let value6_1 = [4, 8];
 </script>
 
 <h1>{$langFn('cslider01010')}</h1>
@@ -84,24 +95,79 @@
   code={`
 <div class="slider-demo-block">
   <span class="demonstration">Breakpoints not displayed</span>
-  <SvelSlider step="10" v-model="value1" />
+  <SvelSlider step="10" bind:value={value2_1} />
 </div>
 <div class="slider-demo-block">
-  <span class="demonstration">Breakpoints not displayed</span>
-  <SvelSlider showStops step="10" v-model="value1" />
+  <span class="demonstration">Breakpoints displayed</span>
+  <SvelSlider showStops step="10" bind:value={value2_2} />
 </div>
 `}
 >
   <div class="slider-demo-block">
     <span class="demonstration">Breakpoints not displayed</span>
-    <SvelSlider step="10" v-model="value1" />
+    <SvelSlider bind:value={value2_1} step="10" />
   </div>
   <div class="slider-demo-block">
-    <span class="demonstration">Breakpoints not displayed</span>
-    <SvelSlider showStops step="10" v-model="value1" />
+    <span class="demonstration">Breakpoints displayed</span>
+    <SvelSlider bind:value={value2_2} showStops step="10" />
   </div>
 </Example>
 
+<h2>{$langFn('cslider04010')}</h2>
+<p>{$langFn('cslider04020')}</p>
+<p>{$langFn('cslider04030')}</p>
+<Example
+  code={`
+<SvelSlider bind:value={value3_1} showInput />
+`}
+>
+  <SvelSlider bind:value={value3_1} showInput />
+</Example>
+
+<h2>{$langFn('cslider05010')}</h2>
+<Example
+  code={`
+<SvelSlider bind:value={value4_1} showInput size="large" />
+<SvelSlider bind:value={value4_2} showInput />
+<SvelSlider bind:value={value4_3} showInput size="small" />
+`}
+>
+  <SvelSlider bind:value={value4_1} showInput size="large" />
+  <SvelSlider bind:value={value4_2} showInput />
+  <SvelSlider bind:value={value4_3} showInput size="small" />
+</Example>
+
+<h2>{$langFn('cslider06010')}</h2>
+<p>{$langFn('cslider06020')}</p>
+<Example
+  code={`
+<SvelSlider bind:value={value5_1} />
+<SvelSlider bind:value={value5_2} placement="bottom" />
+<SvelSlider bind:value={value5_3} placement="right" />
+<SvelSlider bind:value={value5_4} placement="left" />
+`}
+>
+  <SvelSlider bind:value={value5_1} />
+  <SvelSlider bind:value={value5_2} placement="bottom" />
+  <SvelSlider bind:value={value5_3} placement="right" />
+  <SvelSlider bind:value={value5_4} placement="left" />
+</Example>
+
+<h2>{$langFn('cslider07010')}</h2>
+<p>{$langFn('cslider07020')}</p>
+<p>{$langFn('cslider07030')}</p>
+<Example
+  code={`
+<SvelSlider bind:value={value5_1} />
+<SvelSlider bind:value={value5_2} placement="bottom" />
+<SvelSlider bind:value={value5_3} placement="right" />
+<SvelSlider bind:value={value5_4} placement="left" />
+`}
+>
+  {value6_1}
+  <SvelSlider bind:value={value6_1} max="10" range showStops />
+</Example>
+
 <style>
   .slider-demo-block {
     display: flex;