diff --git a/components/Form/__test__/__snapshots__/form.spec.ts.snap b/components/Form/__test__/__snapshots__/form.spec.ts.snap
index e47bedb8..efa44205 100644
--- a/components/Form/__test__/__snapshots__/form.spec.ts.snap
+++ b/components/Form/__test__/__snapshots__/form.spec.ts.snap
@@ -155,7 +155,7 @@ CustomEvent {
 }
 `;
 
-exports[`Test: KForm > props: KForm initValue 1`] = `"<form class="k-form"><div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KInput</label> <div class="k-form-item-content"><div class="k-input"> <div class="k-input--base k-input__md k-input__dark k-input__hover k-input__focus k-input__rounded"> <input class="k-input--inner k-input--inner__dark" type="text" placeholder="Please input value">    </div> </div>  </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KSwitch</label> <div class="k-form-item-content"><div class="k-switch k-switch--base k-switch--md k-switch__checked k-switch-tra" aria-hidden="true"> <span class="k-switch-circle k-switch-circle--md" style="right: 1px;"></span> <span class="k-switch-tx__checked k-switch-tx__checked--md"></span></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KRate</label> <div class="k-form-item-content"><div class="k-rate k-rate--md"><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--void-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span> </div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KInputNumber</label> <div class="k-form-item-content"><div class="k-input svelte-1ibt20v"> <div class="k-input--base k-input-number__md k-input__dark k-input__hover k-input__focus k-input__rounded svelte-1ibt20v"><input type="number" class="k-input--inner k-input--inner__dark svelte-1ibt20v" min="-Infinity" max="Infinity" placeholder="" name="" id=""> <div class="k-input-number--controls svelte-1ibt20v"><div class="k-input-number--up k-input-number--controls__dark svelte-1ibt20v" aria-hidden="true" role="button" aria-label="decrease number"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-up k-input-number--icon k-input--icon__md" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-input-number--down k-input-number--controls__dark svelte-1ibt20v" aria-hidden="true" role="button" aria-label="increase number"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-down k-input-number--icon k-input--icon__md" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div></div></div> </div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KRadio</label> <div class="k-form-item-content"><div class="k-radio-group k-radio-group--base"><label class="k-radio k-radio--base k-radio--base__dark k-radio--md"><input type="radio" value="false" hidden=""> <div class="k-radio--box animate-ikun-checking"></div> KRadio 1</label> <label class="k-radio k-radio--base k-radio--base__dark k-radio--md"><input type="radio" value="false" hidden=""> <div class="k-radio--box animate-ikun-checking"></div> KRadio 2</label> <label class="k-radio k-radio--base k-radio--base__dark k-radio--md"><input type="radio" value="true" hidden=""> <div class="k-radio--box k-radio__selected animate-ikun-checking"><span class="k-icon--base k-icon-transition i-carbon:radio-button-checked !text-white" role="" aria-hidden="true"></span></div> KRadio 3</label> <label class="k-radio k-radio--base k-radio--base__dark k-radio--md k-cur-disabled"><input disabled="" type="radio" value="false" hidden=""> <div class="k-radio--box k-radio--box__disabled animate-ikun-checking"></div> KRadio 4</label></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KCheckbox</label> <div class="k-form-item-content"><div class="k-checkbox-group k-checkbox-group--base"><label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md"><input type="checkbox" value="false" hidden=""> <div class="k-checkbox--box animate-ikun-checking"> </div> KCheckbox 1</label> <label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md"><input type="checkbox" value="true" hidden=""> <div class="k-checkbox--box bg-ikun-main border-ikun-main animate-ikun-checking"><div style="animation: __svelte_185617033_0 200ms linear 0ms 1 both;"><span class="k-icon--base k-icon-transition i-carbon-checkmark !text-white" role="" aria-hidden="true"></span></div> </div> KCheckbox 2</label> <label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md"><input type="checkbox" value="false" hidden=""> <div class="k-checkbox--box animate-ikun-checking"> </div> KCheckbox 3</label> <label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md k-cur-disabled"><input disabled="" type="checkbox" value="false" hidden=""> <div class="k-checkbox--box k-checkbox--box__disabled animate-ikun-checking"> </div> KCheckbox 4</label></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KSelect</label> <div class="k-form-item-content"><div aria-hidden="true" class="flex" data-popover-trigger="" style="width: 0px;"><div class="k-select--base k-select__md k-select--base__dark k-select__hover k-select__focus" slot="triggerEl" aria-hidden="true"> <input class="k-select--inner k-select--inner__md k-select--inner__dark" readonly="" placeholder="Please select value">  <i><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-down  k-select--icon k-select--icon__md" role="" aria-hidden="true"></span></i></div></div>  </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KSelectString</label> <div class="k-form-item-content"><div aria-hidden="true" class="flex" data-popover-trigger="" style="width: 0px;"><div class="k-select--base k-select__md k-select--base__dark k-select__hover k-select__focus" slot="triggerEl" aria-hidden="true"> <input class="k-select--inner k-select--inner__md k-select--inner__dark" readonly="" placeholder="Please select value">  <i><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-down  k-select--icon k-select--icon__md" role="" aria-hidden="true"></span></i></div></div>  </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> slider</label> <div class="k-form-item-content"><div class="k-slider k-slider--base k-slider--md w-300px"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 43%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 43%; left: 0%"></div></div></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> </label> <div class="k-form-item-content"><span id="form_value">{"KInput":"KInput","KSwitch":true,"KRate":4,"KInputNumber":4,"KRadio":"3","KCheckbox":["2"],"KSelect":{"label":"不知明镜里","value":"不知","id":"3"},"KSelectString":"Huge","slider":43}</span> </div></div></form>"`;
+exports[`Test: KForm > props: KForm initValue 1`] = `"<form class="k-form"><div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KInput</label> <div class="k-form-item-content"><div class="k-input"> <div class="k-input--base k-input__md k-input__dark k-input__hover k-input__focus k-input__rounded"> <input class="k-input--inner k-input--inner__dark" type="text" placeholder="Please input value">    </div> </div>  </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KSwitch</label> <div class="k-form-item-content"><div class="k-switch k-switch--base k-switch--md k-switch__checked k-switch-tra" aria-hidden="true"> <span class="k-switch-circle k-switch-circle--md" style="right: 1px;"></span> <span class="k-switch-tx__checked k-switch-tx__checked--md"></span></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KRate</label> <div class="k-form-item-content"><div class="k-rate k-rate--md"><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--void-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span> </div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KInputNumber</label> <div class="k-form-item-content"><div class="k-input svelte-1ibt20v"> <div class="k-input--base k-input-number__md k-input__dark k-input__hover k-input__focus k-input__rounded svelte-1ibt20v"><input type="number" class="k-input--inner k-input--inner__dark svelte-1ibt20v" min="-Infinity" max="Infinity" placeholder="" name="" id=""> <div class="k-input-number--controls svelte-1ibt20v"><div class="k-input-number--up k-input-number--controls__dark svelte-1ibt20v" aria-hidden="true" role="button" aria-label="decrease number"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-up k-input-number--icon k-input--icon__md" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-input-number--down k-input-number--controls__dark svelte-1ibt20v" aria-hidden="true" role="button" aria-label="increase number"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-down k-input-number--icon k-input--icon__md" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div></div></div> </div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KRadio</label> <div class="k-form-item-content"><div class="k-radio-group k-radio-group--base"><label class="k-radio k-radio--base k-radio--base__dark k-radio--md"><input type="radio" value="false" hidden=""> <div class="k-radio--box animate-ikun-checking"></div> KRadio 1</label> <label class="k-radio k-radio--base k-radio--base__dark k-radio--md"><input type="radio" value="false" hidden=""> <div class="k-radio--box animate-ikun-checking"></div> KRadio 2</label> <label class="k-radio k-radio--base k-radio--base__dark k-radio--md"><input type="radio" value="true" hidden=""> <div class="k-radio--box k-radio__selected animate-ikun-checking"><span class="k-icon--base k-icon-transition i-carbon:radio-button-checked !text-white" role="" aria-hidden="true"></span></div> KRadio 3</label> <label class="k-radio k-radio--base k-radio--base__dark k-radio--md k-cur-disabled"><input disabled="" type="radio" value="false" hidden=""> <div class="k-radio--box k-radio--box__disabled animate-ikun-checking"></div> KRadio 4</label></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KCheckbox</label> <div class="k-form-item-content"><div class="k-checkbox-group k-checkbox-group--base"><label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md"><input type="checkbox" value="false" hidden=""> <div class="k-checkbox--box animate-ikun-checking"> </div> KCheckbox 1</label> <label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md"><input type="checkbox" value="true" hidden=""> <div class="k-checkbox--box bg-ikun-main border-ikun-main animate-ikun-checking"><div style="animation: __svelte_185617033_0 200ms linear 0ms 1 both;"><span class="k-icon--base k-icon-transition i-carbon-checkmark !text-white" role="" aria-hidden="true"></span></div> </div> KCheckbox 2</label> <label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md"><input type="checkbox" value="false" hidden=""> <div class="k-checkbox--box animate-ikun-checking"> </div> KCheckbox 3</label> <label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md k-cur-disabled"><input disabled="" type="checkbox" value="false" hidden=""> <div class="k-checkbox--box k-checkbox--box__disabled animate-ikun-checking"> </div> KCheckbox 4</label></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KSelect</label> <div class="k-form-item-content"><div aria-hidden="true" class="flex" data-popover-trigger="" style="width: 0px;"><div class="k-select--base k-select__md k-select--base__dark k-select__hover k-select__focus" slot="triggerEl" aria-hidden="true"> <input class="k-select--inner k-select--inner__md k-select--inner__dark" readonly="" placeholder="Please select value">  <i><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-down  k-select--icon k-select--icon__md" role="" aria-hidden="true"></span></i></div></div>  </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KSelectString</label> <div class="k-form-item-content"><div aria-hidden="true" class="flex" data-popover-trigger="" style="width: 0px;"><div class="k-select--base k-select__md k-select--base__dark k-select__hover k-select__focus" slot="triggerEl" aria-hidden="true"> <input class="k-select--inner k-select--inner__md k-select--inner__dark" readonly="" placeholder="Please select value">  <i><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-down  k-select--icon k-select--icon__md" role="" aria-hidden="true"></span></i></div></div>  </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> slider</label> <div class="k-form-item-content"><div class="k-slider k-slider--base k-slider--md w-300px"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"> <div class="k-slider--button-wrapper" aria-hidden="true" style="left: 43%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 43%; left: 0%"></div></div></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> </label> <div class="k-form-item-content"><span id="form_value">{"KInput":"KInput","KSwitch":true,"KRate":4,"KInputNumber":4,"KRadio":"3","KCheckbox":["2"],"KSelect":{"label":"不知明镜里","value":"不知","id":"3"},"KSelectString":"Huge","slider":43}</span> </div></div></form>"`;
 
 exports[`Test: KForm > props: KForm labelWidth 1`] = `"<form class="k-form"><div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px; width: 100px;"> KInput</label> <div class="k-form-item-content"><div class="k-input"> <div class="k-input--base k-input__md k-input__dark k-input__hover k-input__focus k-input__rounded"> <input class="k-input--inner k-input--inner__dark" type="text" placeholder="Please input value">    </div> </div>  </div></div></form> <button></button>"`;
 
diff --git a/components/Slider/__test__/__snapshots__/slider.spec.ts.snap b/components/Slider/__test__/__snapshots__/slider.spec.ts.snap
index c36796d1..b3460cc3 100644
--- a/components/Slider/__test__/__snapshots__/slider.spec.ts.snap
+++ b/components/Slider/__test__/__snapshots__/slider.spec.ts.snap
@@ -1,15 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KSlider > props: attrs 1`] = `"<div class="k-slider k-slider--base k-slider--md" you="world"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: attrs 1`] = `"<div class="k-slider k-slider--base k-slider--md" you="world"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"> <div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
 
-exports[`Test: KSlider > props: cls 1`] = `"<div class="k-slider k-slider--base k-slider--md 窈窕淑女，君子好逑"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: cls 1`] = `"<div class="k-slider k-slider--base k-slider--md 窈窕淑女，君子好逑"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"> <div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
 
-exports[`Test: KSlider > props: disabled 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: disabled 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"> <div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
 
-exports[`Test: KSlider > props: min and max 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 100%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 100%; left: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: min and max 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"> <div class="k-slider--button-wrapper" aria-hidden="true" style="left: 100%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 100%; left: 0%"></div></div></div>"`;
 
-exports[`Test: KSlider > props: size 1`] = `"<div class="k-slider k-slider--base k-slider--lg"><div class="k-slider--runway--lg k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--lg"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: showStops 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--stop k-slider--stop--md" style="left: 10%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 20%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 30%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 40%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 50%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 60%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 70%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 80%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 90%"></div> <div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
 
-exports[`Test: KSlider > props: value 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 10%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;"><span slot="contentEl">10</span> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div></div> <div class="k-slider--bar" style="width: 10%; left: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: size 1`] = `"<div class="k-slider k-slider--base k-slider--lg"><div class="k-slider--runway--lg k-slider--runway" aria-hidden="true"> <div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--lg"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
 
-exports[`Test: KSlider > props: vertical 1`] = `"<div class="k-slider k-slider--base__vertical k-slider--md__vertical"><div class="k-slider--runway--md__vertical k-slider--runway__vertical" aria-hidden="true"><div class="k-slider--button-wrapper__vertical" aria-hidden="true" style="bottom: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar__vertical" style="height: 0%; bottom: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: value 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"> <div class="k-slider--button-wrapper" aria-hidden="true" style="left: 10%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;"><span slot="contentEl">10</span> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div></div> <div class="k-slider--bar" style="width: 10%; left: 0%"></div></div></div>"`;
+
+exports[`Test: KSlider > props: vertical 1`] = `"<div class="k-slider k-slider--base__vertical k-slider--md__vertical"><div class="k-slider--runway--md__vertical k-slider--runway__vertical" aria-hidden="true"> <div class="k-slider--button-wrapper__vertical" aria-hidden="true" style="bottom: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar__vertical" style="height: 0%; bottom: 0%"></div></div></div>"`;
diff --git a/components/Slider/__test__/slider.spec.ts b/components/Slider/__test__/slider.spec.ts
index 1299a9db..b4f4ad19 100644
--- a/components/Slider/__test__/slider.spec.ts
+++ b/components/Slider/__test__/slider.spec.ts
@@ -161,6 +161,27 @@ describe('Test: KSlider', () => {
 		expect(host.innerHTML).matchSnapshot();
 	});
 
+	test('props: showStops', async () => {
+		const step: number = 10;
+		const min: number = 0;
+		const max: number = 100;
+		const instance = new KSlider({
+			target: host,
+			props: {
+				step,
+				max,
+				min,
+				showStops: true
+			}
+		});
+		expect(instance).toBeTruthy();
+		await tick();
+		expect(host.innerHTML.includes('k-slider--stop')).toBe(true);
+		const stopsElm = host.querySelectorAll('.k-slider--stop');
+		expect(stopsElm.length).toBe((max - min) / step - 1);
+		expect(host.innerHTML).matchSnapshot();
+	});
+
 	test('props: cls', async () => {
 		const instance = new KSlider({
 			target: host,
diff --git a/components/Slider/src/index.svelte b/components/Slider/src/index.svelte
index 38b42b87..869f0f2b 100644
--- a/components/Slider/src/index.svelte
+++ b/components/Slider/src/index.svelte
@@ -17,6 +17,7 @@
 	export let cls: KSliderProps['cls'] = undefined;
 	export let showTooltip: KSliderProps['showTooltip'] = true;
 	export let format: KSliderProps['format'];
+	export let showStops: KSliderProps['showStops'] = false;
 
 	/*********************** KForm logic start ************************/
 	let disabledFrom = false;
@@ -66,6 +67,12 @@
 		}
 	}
 
+	// discrete showStops attr
+	let discreteNum = (max - min) / step - 1;
+	$: discreteDivsArray = showStops
+		? Array.from({ length: discreteNum }, (_, index) => index + 1)
+		: [];
+
 	// current value
 	let isDragging: boolean = false;
 	let startX: number = 0;
@@ -198,10 +205,28 @@
 		[`${prefixCls}--bar`]: !vertical,
 		[`${prefixCls}--bar__vertical`]: vertical
 	});
+	$: discreteCls = clsx(
+		{
+			[`${prefixCls}--stop`]: !vertical,
+			[`${prefixCls}--stop__vertical`]: vertical
+		},
+		`${prefixCls}--stop--${sizeInner}`
+	);
 </script>
 
 <div class={baseCls} {...$$restProps} {...attrs}>
 	<div bind:this={runwayRef} class={runwayCls} aria-hidden="true" on:mousedown={handleRunwayClick}>
+		{#if discreteDivsArray.length > 0}
+			{#each discreteDivsArray as discreteDiv}
+				<div
+					class={discreteCls}
+					style={vertical
+						? `top: ${(discreteDiv * (max - min)) / step}%`
+						: `left: ${(discreteDiv * (max - min)) / step}%`}
+				></div>
+			{/each}
+		{/if}
+
 		<div
 			class={buttonWrapperCls}
 			aria-hidden="true"
diff --git a/components/Slider/src/types.d.ts b/components/Slider/src/types.d.ts
index f647b7f9..dc870abb 100644
--- a/components/Slider/src/types.d.ts
+++ b/components/Slider/src/types.d.ts
@@ -11,6 +11,7 @@ export type KSliderProps = {
 	disabled: boolean;
 	vertical: boolean;
 	showTooltip: boolean;
+	showStops: boolean;
 	format: (value: number) => number | string;
 	cls: ClassValue;
 	attrs: Record<string, string>;
diff --git a/docs/components/KSlider.md b/docs/components/KSlider.md
index a541382c..fdc105fe 100644
--- a/docs/components/KSlider.md
+++ b/docs/components/KSlider.md
@@ -59,16 +59,23 @@ Add `size` attribute to change the size of Slider. It supports `sm`, `md` and `l
 
 <demo src="slider/sizes.svelte" github="Slider"></demo>
 
+## Discrete values
+
+Set step size with the `step` attribute. You can display breakpoints by setting the `showStops` attribute
+
+<demo src="slider/discrete.svelte" github="Slider"></demo>
+
 ## Slider Props
 
 | Name     | Type                                  | Default                    | Description                |
-| -------- | ------------------------------------- | -------------------------- | -------------------------- |
+|----------|---------------------------------------|----------------------------|----------------------------|
 | value    | `number`                              | `0`                        | Binding value              |
 | vertical | `boolean`                             | `false`                    | Vertical mode              |
 | format   | `(value: number) => number \| string` | `(value: number) => value` | Tooltip format value       |
 | min      | `number`                              | `0`                        | Minimum value              |
 | max      | `number`                              | `100`                      | Maximum value              |
 | step     | `number`                              | `1`                        | Step size                  |
+| showStop | `boolean`                             | `false`                    | Display breakpoints        |
 | disabled | `boolean`                             | `false`                    | Whether Slider is disabled |
 | size     | `sm \| md \| lg`                      | `md`                       | Size of `slider`.          |
 | cls      | `string`                              | `-`                        | Additional class           |
diff --git a/docs/example/slider/discrete.svelte b/docs/example/slider/discrete.svelte
new file mode 100644
index 00000000..1af3638a
--- /dev/null
+++ b/docs/example/slider/discrete.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { KSlider } from '@ikun-ui/slider';
+
+	let value = 0;
+	let min = 0;
+	let max = 100;
+	let step = 10;
+	const handleInput = (event) => {
+		value = event.detail;
+	};
+</script>
+
+<div>
+	<KSlider {max} {min} on:input={handleInput} {step} {value}></KSlider>
+	<KSlider {max} {min} on:input={handleInput} showStops size="lg" {step} {value}></KSlider>
+	<p class="px-2">value: {value}</p>
+</div>
+
+<div class="h-100 flex">
+	<KSlider {max} {min} on:input={handleInput} {step} {value} vertical></KSlider>
+	<KSlider {max} {min} on:input={handleInput} showStops size="lg" {step} {value} vertical></KSlider>
+</div>
+<p class="px-2">value: {value}</p>
diff --git a/preset/src/shortcuts/src/slider.ts b/preset/src/shortcuts/src/slider.ts
index b313e019..7e2be287 100644
--- a/preset/src/shortcuts/src/slider.ts
+++ b/preset/src/shortcuts/src/slider.ts
@@ -43,5 +43,12 @@ export const sliderShortcuts: Record<string, string> = {
 	'k-slider--button--md': 'w-16px h-16px',
 	'k-slider--button--lg': 'w-20px h-20px',
 
-	'k-slider--button': 'fcc b-2px b-solid b-ikun-main rd-50% bg-ikun-white line-height-none'
+	'k-slider--button': 'fcc b-2px b-solid b-ikun-main rd-50% bg-ikun-white line-height-none',
+
+	// discrete stop
+	'k-slider--stop': 'inline-block bg-ikun-main absolute top-50% translate-y--50% rd-50%',
+	'k-slider--stop__vertical': 'rd-50% bg-ikun-main absolute left-50% translate-x--50%',
+	'k-slider--stop--sm': 'w-3px h-3px',
+	'k-slider--stop--md': 'w-4px h-4px',
+	'k-slider--stop--lg': 'w-5px h-5px'
 };