[stdf]Update Slider compoent, demo and documents.

demo/src/routes/en_US/slider/+page.svelte

@@ -2,15 +2,10 @@
 <script>
 	import { Slider, Icon } from '../../../../../packages/stdf/components';
 
-	let value = 20;
-	const onChangeFun = e => {
-		value = e.detail;
-	};
-	let valueRange = [50, 60];
-	const onChangeRangeFun = e => {
-		valueRange = e.detail;
-	};
-	//Generates an array of random numbers between the specified numbers
+	let value = $state(20);
+
+	let valueRange = $state([50, 60]);
+	// Generate an array of random numbers within a specified range
 	const randomArray = (min, max, length) => {
 		let arr = [];
 		for (let i = 0; i < length; i++) {
@@ -18,50 +13,45 @@
 		}
 		return arr;
 	};
-	//Sort an array incrementally or decently
-	const sortArray = (arr, isAsc) => {
-		return arr.sort((a, b) => (isAsc ? a - b : b - a));
-	};
+	// Sort the array in ascending or descending order
+	const sortArray = (arr, isAsc) => arr.sort((a, b) => (isAsc ? a - b : b - a));
 	const barList1 = sortArray(randomArray(2, 60, 20), true);
 	const barList2 = sortArray(randomArray(2, 60, 20), false);
 	const barList = [...barList1, ...barList2];
-	let valueBar = 70;
-	const onChangeBarFun = e => {
-		valueBar = e.detail;
-	};
+	let valueBar = $state(70);
 </script>
 
-<div class="mx-4 mt-8 font-bold text-lg">Basic usage</div>
+<div class="mx-4 mt-8 text-lg font-bold">Basic Usage</div>
 <div class="px-6 py-4">
 	<Slider />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">monitor value</div>
+<div class="mx-4 mt-8 text-lg font-bold">Monitor value</div>
 <div class="px-6 py-4">
-	<Slider on:change={onChangeFun} {value} />
-	Current value:{value}
+	<Slider onchange={([v]) => (value = v)} {value} />
+	Current value: {value}
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Step size is 5</div>
+<div class="mx-4 mt-8 text-lg font-bold">Step size of 5</div>
 <div class="px-6 py-4">
 	<Slider step={5} />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Step size is 0.1</div>
+<div class="mx-4 mt-8 text-lg font-bold">Step size of 0.1</div>
 <div class="px-6 py-4">
 	<Slider step={0.1} value={0.2} minRange={0} maxRange={1} />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Set optional range (60-80)</div>
+<div class="mx-4 mt-8 text-lg font-bold">Set selectable range (60-80)</div>
 <div class="px-6 py-4">
 	<Slider value={68} minRange={60} maxRange={80} />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Interval selection</div>
+<div class="mx-4 mt-8 text-lg font-bold">Range selection</div>
 <div class="px-6 py-4">
 	<Slider isRange />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Range setting Optional range (40-80)</div>
+<div class="mx-4 mt-8 text-lg font-bold">Set range for interval (40-80)</div>
 <div class="px-6 py-4">
-	<Slider isRange minRange={40} maxRange={80} startValue={valueRange[0]} endValue={valueRange[1]} on:change={onChangeRangeFun} />
-	Current interval:{valueRange[0]} - {valueRange[1]}
+	<Slider isRange minRange={40} maxRange={80} startValue={valueRange[0]} endValue={valueRange[1]} onchange={arr => (valueRange = arr)} />
+	Current range: {valueRange[0]} - {valueRange[1]}
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Different fillet</div>
+<div class="mx-4 mt-8 text-lg font-bold">Different border radius</div>
 <div class="px-6 py-4">
 	<Slider radius="base" />
 </div>
@@ -71,14 +61,14 @@
 <div class="px-6 py-4">
 	<Slider radius="base" isRange />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Wire frame slider</div>
+<div class="mx-4 mt-8 text-lg font-bold">Outlined slider</div>
 <div class="px-6 py-4">
 	<Slider lineBlock radius="base" />
 </div>
 <div class="px-6 py-4">
 	<Slider lineBlock isRange />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Always show Tip</div>
+<div class="mx-4 mt-8 text-lg font-bold">Always show Tip</div>
 <div class="px-6 py-4">
 	<Slider showTip="always" />
 </div>
@@ -88,38 +78,40 @@
 <div class="px-6 py-4">
 	<Slider showTip="always" radius="none" />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Do not display Tip</div>
+<div class="mx-4 mt-8 text-lg font-bold">Don't show Tip</div>
 <div class="px-6 py-4">
 	<Slider showTip="never" />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Composite layout</div>
-<div class="flex space-x-3 p-4">
+<div class="mx-4 mt-8 text-lg font-bold">Combined layout</div>
+<div class="flex p-4 space-x-3">
 	<Icon name="ri-volume-mute-line" />
 	<div class="grow">
 		<Slider />
 	</div>
 	<Icon name="ri-volume-up-line" />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">use Slot</div>
+<div class="mx-4 mt-8 text-lg font-bold">Using Snippet</div>
 <div class="px-6 pt-16">
-	<Slider lineBlock showTip="never" useSlot value={valueBar} on:change={onChangeBarFun}>
-		<div class="grow relative items-end">
-			<div class="flex justify-between items-end overflow-hidden" style="transform: translateY(-30px);">
-				{#each barList as item, i}
-					<div
-						class={`w-1 rounded-full${i / 40 < valueBar / 100 ? ' bg-primary dark:bg-dark' : ' bg-gray-200 dark:bg-gray-500'}`}
-						style="height: {item}px"
-					/>
-				{/each}
+	<Slider lineBlock showTip="never" value={valueBar} onchange={([v]) => (valueBar = v)}>
+		{#snippet children()}
+			<div class="relative items-end grow">
+				<div class="flex overflow-hidden justify-between items-end" style="transform: translateY(-30px);">
+					{#each barList as item, i}
+						<div
+							class="w-1 rounded-full{i / 40 < valueBar / 100 ? ' bg-primary dark:bg-dark' : ' bg-gray-200 dark:bg-gray-500'}"
+							style="height: {item}px"
+						></div>
+					{/each}
+				</div>
 			</div>
-		</div>
+		{/snippet}
 	</Slider>
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">disable</div>
+<div class="mx-4 mt-8 text-lg font-bold">Disabled</div>
 <div class="px-6 py-4">
 	<Slider disabled />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">Read only</div>
+<div class="mx-4 mt-8 text-lg font-bold">Read-only</div>
 <div class="px-6 py-4">
 	<Slider readonly />
 </div>

demo/src/routes/zh_CN/slider/+page.svelte

@@ -2,14 +2,9 @@
 <script>
 	import { Slider, Icon } from '../../../../../packages/stdf/components';
 
-	let value = 20;
-	const onChangeFun = e => {
-		value = e.detail;
-	};
-	let valueRange = [50, 60];
-	const onChangeRangeFun = e => {
-		valueRange = e.detail;
-	};
+	let value = $state(20);
+
+	let valueRange = $state([50, 60]);
 	//生成指定数字之间的随机数组成的数组
 	const randomArray = (min, max, length) => {
 		let arr = [];
@@ -19,49 +14,44 @@
 		return arr;
 	};
 	//将数组递增或递减排序
-	const sortArray = (arr, isAsc) => {
-		return arr.sort((a, b) => (isAsc ? a - b : b - a));
-	};
+	const sortArray = (arr, isAsc) => arr.sort((a, b) => (isAsc ? a - b : b - a));
 	const barList1 = sortArray(randomArray(2, 60, 20), true);
 	const barList2 = sortArray(randomArray(2, 60, 20), false);
 	const barList = [...barList1, ...barList2];
-	let valueBar = 70;
-	const onChangeBarFun = e => {
-		valueBar = e.detail;
-	};
+	let valueBar = $state(70);
 </script>
 
-<div class="mx-4 mt-8 font-bold text-lg">基础用法</div>
+<div class="mx-4 mt-8 text-lg font-bold">基础用法</div>
 <div class="px-6 py-4">
 	<Slider />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">监听 value</div>
+<div class="mx-4 mt-8 text-lg font-bold">监听 value</div>
 <div class="px-6 py-4">
-	<Slider on:change={onChangeFun} {value} />
+	<Slider onchange={([v]) => (value = v)} {value} />
 	当前值：{value}
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">步长为 5</div>
+<div class="mx-4 mt-8 text-lg font-bold">步长为 5</div>
 <div class="px-6 py-4">
 	<Slider step={5} />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">步长为 0.1</div>
+<div class="mx-4 mt-8 text-lg font-bold">步长为 0.1</div>
 <div class="px-6 py-4">
 	<Slider step={0.1} value={0.2} minRange={0} maxRange={1} />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">设定可选范围（60-80）</div>
+<div class="mx-4 mt-8 text-lg font-bold">设定可选范围（60-80）</div>
 <div class="px-6 py-4">
 	<Slider value={68} minRange={60} maxRange={80} />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">区间选择</div>
+<div class="mx-4 mt-8 text-lg font-bold">区间选择</div>
 <div class="px-6 py-4">
 	<Slider isRange />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">区间设定可选范围（40-80）</div>
+<div class="mx-4 mt-8 text-lg font-bold">区间设定可选范围（40-80）</div>
 <div class="px-6 py-4">
-	<Slider isRange minRange={40} maxRange={80} startValue={valueRange[0]} endValue={valueRange[1]} on:change={onChangeRangeFun} />
+	<Slider isRange minRange={40} maxRange={80} startValue={valueRange[0]} endValue={valueRange[1]} onchange={arr => (valueRange = arr)} />
 	当前区间：{valueRange[0]} - {valueRange[1]}
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">不同圆角</div>
+<div class="mx-4 mt-8 text-lg font-bold">不同圆角</div>
 <div class="px-6 py-4">
 	<Slider radius="base" />
 </div>
@@ -71,14 +61,14 @@
 <div class="px-6 py-4">
 	<Slider radius="base" isRange />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">线框滑块</div>
+<div class="mx-4 mt-8 text-lg font-bold">线框滑块</div>
 <div class="px-6 py-4">
 	<Slider lineBlock radius="base" />
 </div>
 <div class="px-6 py-4">
 	<Slider lineBlock isRange />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">一直显示 Tip</div>
+<div class="mx-4 mt-8 text-lg font-bold">一直显示 Tip</div>
 <div class="px-6 py-4">
 	<Slider showTip="always" />
 </div>
@@ -88,38 +78,40 @@
 <div class="px-6 py-4">
 	<Slider showTip="always" radius="none" />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">不显示 Tip</div>
+<div class="mx-4 mt-8 text-lg font-bold">不显示 Tip</div>
 <div class="px-6 py-4">
 	<Slider showTip="never" />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">组合布局</div>
-<div class="flex space-x-3 p-4">
+<div class="mx-4 mt-8 text-lg font-bold">组合布局</div>
+<div class="flex p-4 space-x-3">
 	<Icon name="ri-volume-mute-line" />
 	<div class="grow">
 		<Slider />
 	</div>
 	<Icon name="ri-volume-up-line" />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">使用 Slot</div>
+<div class="mx-4 mt-8 text-lg font-bold">使用 Snippet</div>
 <div class="px-6 pt-16">
-	<Slider lineBlock showTip="never" useSlot value={valueBar} on:change={onChangeBarFun}>
-		<div class="grow relative items-end">
-			<div class="flex justify-between items-end overflow-hidden" style="transform: translateY(-30px);">
-				{#each barList as item, i}
-					<div
-						class={`w-1 rounded-full${i / 40 < valueBar / 100 ? ' bg-primary dark:bg-dark' : ' bg-gray-200 dark:bg-gray-500'}`}
-						style="height: {item}px"
-					/>
-				{/each}
+	<Slider lineBlock showTip="never" value={valueBar} onchange={([v]) => (valueBar = v)}>
+		{#snippet children()}
+			<div class="relative items-end grow">
+				<div class="flex overflow-hidden justify-between items-end" style="transform: translateY(-30px);">
+					{#each barList as item, i}
+						<div
+							class="w-1 rounded-full{i / 40 < valueBar / 100 ? ' bg-primary dark:bg-dark' : ' bg-gray-200 dark:bg-gray-500'}"
+							style="height: {item}px"
+						></div>
+					{/each}
+				</div>
 			</div>
-		</div>
+		{/snippet}
 	</Slider>
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">禁用</div>
+<div class="mx-4 mt-8 text-lg font-bold">禁用</div>
 <div class="px-6 py-4">
 	<Slider disabled />
 </div>
-<div class="mx-4 mt-8 font-bold text-lg">只读</div>
+<div class="mx-4 mt-8 text-lg font-bold">只读</div>
 <div class="px-6 py-4">
 	<Slider readonly />
 </div>

doc/components/slider/api.md

@@ -1,29 +1,28 @@
 ## Slider Props
 
-| 属性       | 类型    | 默认值  | 可选值                    | 必传 | 说明             |
-| ---------- | ------- | ------- | ------------------------- | ---- | ---------------- |
-| value      | Number  | 40      | -                         | N    | 当前值。         |
-| step       | Number  | 1       | -                         | N    | 步长。           |
-| minRange   | Number  | 0       | -                         | N    | 可选最小值。     |
-| maxRange   | Number  | 100     | -                         | N    | 可选最大值。     |
-| isRange    | Boolean | false   | true/false                | N    | 是否为区间选择。 |
-| startValue | Number  | 20      | -                         | N    | 区间选择开始值。 |
-| endValue   | Number  | 60      | -                         | N    | 区间选择结束值。 |
-| showTip    | String  | 'touch' | 'always'/'never'/'touch'  | N    | 提示显示方式。   |
-| radius     | String  | 'full'  | 'none'/'base'/'xl'/'full' | N    | 圆角风格。       |
-| lineBlock  | Boolean | false   | true/false                | N    | 滑块是否为线框。 |
-| disabled   | Boolean | false   | true/false                | N    | 是否禁用。       |
-| readonly   | Boolean | false   | true/false                | N    | 是否只读。       |
-| useSlot    | Boolean | false   | true/false                | N    | 是否使用 Slot。  |
+| 名称       | 类型                          | 默认值    | 必传 | 说明             |
+| ---------- | ----------------------------- | --------- | ---- | ---------------- |
+| value      | `number`                      | `40`      | N    | 当前值。         |
+| step       | `number`                      | `1`       | N    | 步长。           |
+| minRange   | `number`                      | `0`       | N    | 可选最小值。     |
+| maxRange   | `number`                      | `100`     | N    | 可选最大值。     |
+| isRange    | `boolean`                     | `false`   | N    | 是否为区间选择。 |
+| startValue | `number`                      | `20`      | N    | 区间选择开始值。 |
+| endValue   | `number`                      | `60`      | N    | 区间选择结束值。 |
+| showTip    | `'always'\|'never'\|'touch`   | `'touch'` | N    | 提示显示方式。   |
+| radius     | `'none'\|'base'\|'xl'\|'full` | `'full'`  | N    | 圆角风格。       |
+| lineBlock  | `boolean`                     | `false`   | N    | 滑块是否为线框。 |
+| disabled   | `boolean`                     | `false`   | N    | 是否禁用。       |
+| readonly   | `boolean`                     | `false`   | N    | 是否只读。       |
 
 ## Slider Events
 
-| 名称   | 参数                                                                                  | 描述             |
-| ------ | ------------------------------------------------------------------------------------- | ---------------- |
-| change | event：事件对象，其中 detail 表示当前取值（区间选择时表示开始值与结束值组成的数组）。 | 点击或滑动触发。 |
+| 名称     | 类型                                  | 参数                                      | 描述             |
+| -------- | ------------------------------------- | ----------------------------------------- | ---------------- |
+| onchange | `(values: [number, number?]) => void` | values - 当前取值数组（区间选择时两项）。 | 取值变化时触发。 |
 
-## Slider Slots
+## Slider Snippets
 
-| 名称 | 说明                               |
-| ---- | ---------------------------------- |
-| -    | useSlot 为 true 时的进度区域内容。 |
+| 名称     | 类型                                                                | 参数 | 说明                     |
+| -------- | ------------------------------------------------------------------- | ---- | ------------------------ |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 传入将渲染进度区域内容。 |

doc/components/slider/api_en.md

@@ -1,29 +1,28 @@
 ## Slider Props
 
-| Properties | Type    | Default value | optional value            | required | Description                             |
-| ---------- | ------- | ------------- | ------------------------- | -------- | --------------------------------------- |
-| value      | Number  | 40            | -                         | N        | The current value.                      |
-| step       | Number  | 1             | -                         | N        | Step.                                   |
-| minRange   | Number  | 0             | -                         | N        | Optional minimum value.                 |
-| maxRange   | Number  | 100           | -                         | N        | The maximum value is available.         |
-| isRange    | Boolean | false         | true/false                | N        | Whether it is a interval selection.     |
-| startValue | Number  | 20            | -                         | N        | Select the start value of the interval. |
-| endValue   | Number  | 60            | -                         | N        | Select the end value of the interval.   |
-| showTip    | String  | 'touch'       | 'always'/'never'/'touch'  | N        | Prompt the display method.              |
-| radius     | String  | 'full'        | 'none'/'base'/'xl'/'full' | N        | Round -corner style.                    |
-| lineBlock  | Boolean | false         | true/false                | N        | Whether the slider is a wire frame.     |
-| disabled   | Boolean | false         | true/false                | N        | Whether to disable.                     |
-| readonly   | Boolean | false         | true/false                | N        | Whether to read only.                   |
-| useSlot    | Boolean | false         | true/false                | N        | Whether to use slot。                   |
+| Name       | Type                          | Default   | Required | Description                         |
+| ---------- | ----------------------------- | --------- | -------- | ----------------------------------- |
+| value      | `number`                      | `40`      | N        | Current value.                      |
+| step       | `number`                      | `1`       | N        | Step size.                          |
+| minRange   | `number`                      | `0`       | N        | Minimum selectable value.           |
+| maxRange   | `number`                      | `100`     | N        | Maximum selectable value.           |
+| isRange    | `boolean`                     | `false`   | N        | Whether it's a range selection.     |
+| startValue | `number`                      | `20`      | N        | Start value for range selection.    |
+| endValue   | `number`                      | `60`      | N        | End value for range selection.      |
+| showTip    | `'always'\|'never'\|'touch`   | `'touch'` | N        | Tip display mode.                   |
+| radius     | `'none'\|'base'\|'xl'\|'full` | `'full'`  | N        | Border radius style.                |
+| lineBlock  | `boolean`                     | `false`   | N        | Whether the slider is a line block. |
+| disabled   | `boolean`                     | `false`   | N        | Whether it's disabled.              |
+| readonly   | `boolean`                     | `false`   | N        | Whether it's read-only.             |
 
 ## Slider Events
 
-| Name   | Parameters                                                                                                                                         | Description                |
-| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
-| change | Event: Event object, where default represents the current value (the array of the starting value and the end value when the interval is selected). | Click or slide to trigger. |
+| Name     | Type                                  | Parameters                                          | Description                   |
+| -------- | ------------------------------------- | --------------------------------------------------- | ----------------------------- |
+| onchange | `(values: [number, number?]) => void` | values - Current value array (two items for range). | Triggered when value changes. |
 
-## Slider Slots
+## Slider Snippets
 
-| Name | Description                                     |
-| ---- | ----------------------------------------------- |
-| -    | useSlot is the schedule area content when True. |
+| Name     | Type                                                                | Parameters | Description                                  |
+| -------- | ------------------------------------------------------------------- | ---------- | -------------------------------------------- |
+| children | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Content to be rendered in the progress area. |

doc/components/slider/guide.md

@@ -10,6 +10,6 @@
 
 Slider 未设置外部间距，请在页面布局时自行设置。
 
-## Slot
+## Snippet
 
-当 Props 的 useSlot 为 true 时，Slider 表示进度的区域会使用 slot 渲染，参考示例。
+当传入 Snippet 时，Slider 的进度区域会使用 Snippet 渲染，参考示例。

doc/components/slider/guide_en.md

@@ -10,6 +10,6 @@ When passing in step, please try to ensure that (maxRange - minRange) / step is
 
 The Slider component does not set external margins, please set it yourself when laying out the page.
 
-## Slot
+## Snippet
 
-When useSlot of the Props is true, the area representing the progress of the Slider will render using slots, refer to the example.
+When passing in Snippet, the area representing the progress of the Slider will render using Snippet, refer to the example.

packages/stdf/components/slider/Slider.svelte

@@ -3,8 +3,8 @@
 	import { fly } from 'svelte/transition';
 	import { throttleWithRAF, debounce, stepNumberFun } from '../utils';
 
-	/** @typedef {import('../../index.d').Slider} Slider */
-	/** @type {Slider} */
+	/** @typedef {import('../../index.d').Slider} SliderProps */
+	/** @type {SliderProps} */
 	let {
 		value = $bindable(40),
 		step = 1,
@@ -22,21 +22,31 @@
 		onchange,
 	} = $props();
 
-	let lineDom = $state(null); //滑动条dom slider dom
-	let blockDom = $state(null); //滑块dom block dom
-	let blockWidth = 0; //滑块宽度 block width
-	let lineDomStartX = 0; //滑块条起始位置 slider start position
-	let lineDomEndX = 0; //滑块条结束位置 slider end position
-	let lineDomWidth = 0; //滑块条宽度 slider width
-	let currentX = $state(((value - minRange) / (maxRange - minRange)) * lineDomWidth); //初始位置 initial position
-	let currentStartX = $state(((startValue - minRange) / (maxRange - minRange)) * lineDomWidth); //区间选择时开始位置 start position
-	let currentEndX = $state(((endValue - minRange) / (maxRange - minRange)) * lineDomWidth); //区间选择时结束位置 end position
-	let currentMove = $state('none'); //当前移动的滑块 current move block
+	//滑动条 dom slider dom
+	let lineDom = $state(null);
+	//滑块 dom block dom
+	let blockDom = $state(null);
+	//滑块宽度 block width
+	let blockWidth = 0;
+	//滑块条起始位置 slider start position
+	let lineDomStartX = 0;
+	//滑块条结束位置 slider end position
+	let lineDomEndX = 0;
+	//滑块条宽度 slider width
+	let lineDomWidth = 0;
+	//初始位置 initial position
+	let currentX = $state(((value - minRange) / (maxRange - minRange)) * lineDomWidth);
+	//区间选择时开始位置 start position
+	let currentStartX = $state(((startValue - minRange) / (maxRange - minRange)) * lineDomWidth);
+	//区间选择时结束位置 end position
+	let currentEndX = $state(((endValue - minRange) / (maxRange - minRange)) * lineDomWidth);
+	//当前移动的滑块 current move block
+	let currentMove = $state('none');
 
-	let isDown = false; //是否按下 is down
+	//是否按下 is down
+	let isDown = false;
+	const radiusObj = { none: ' rounded-none', base: ' rounded', xl: ' rounded-xl', full: ' rounded-full' };
 
-	//滑动开始
-	//slide start
 	const touchLineStart = e => {
 		if (disabled || readonly) {
 			return;
@@ -108,7 +118,7 @@
 					currentEndX = lineDomEndX - lineDomStartX;
 				} else {
 					currentEndX = clientX - lineDomStartX;
-					//由于开启了防抖，有极短时间内会出现currentEndX大于lineDomEndX的情况，所以这里做了一个判断
+					//由于开启了防抖，有极短时间内会出现 currentEndX 大于 lineDomEndX 的情况，所以这里做了一个判断
 					//Due to the opening of the anti-shake, there will be a situation where currentEndX is greater than lineDomEndX in a very short time, so a judgment is made here
 					currentEndX = currentEndX < currentStartX ? currentStartX : currentEndX;
 				}
@@ -146,116 +156,109 @@
 			blockWidth = blockDom.getBoundingClientRect().width;
 		}
 	};
-	const radiusObj = { none: ' rounded-none', base: ' rounded', xl: ' rounded-xl', full: ' rounded-full' };
 	onMount(() => {
 		handleResize();
-		// @ts-ignore
+		// @ts-expect-error
 		window.addEventListener('resize', debounce(handleResize, 200));
 	});
 </script>
 
-<div class={`relative h-7${disabled ? ' opacity-50' : ''}`}>
+<div class="relative h-7{disabled ? ' opacity-50' : ''}">
 	<div
 		onpointerdown={touchLineStart}
 		onpointermove={e => throttleWithRAF(touchLineMove)(e)}
 		onpointerup={touchLineEnd}
-		class="absolute flex flex-col justify-center h-7 w-full touch-none cursor-move"
+		class="flex absolute flex-col justify-center w-full h-7 cursor-move touch-none"
 		bind:this={lineDom}
 	>
 		{#if children}
 			{@render children()}
 		{:else}
-			<div class={`w-full h-1 bg-black/10 dark:bg-white/20${radiusObj[radius] || radiusObj['full']}`}>
+			<div class="w-full h-1 bg-black/10 dark:bg-white/20{radiusObj[radius] || radiusObj['full']}">
 				{#if isRange}
 					<div
-						class={`bg-primary dark:bg-dark h-1${radiusObj[radius] || radiusObj['full']}`}
-						style={`width:${currentEndX - currentStartX}px;transform: translateX(${currentStartX}px);`}
+						class="bg-primary dark:bg-dark h-1{radiusObj[radius] || radiusObj['full']}"
+						style="width:{currentEndX - currentStartX}px;transform: translateX({currentStartX}px);"
 					></div>
 				{:else}
-					<div class={`bg-primary dark:bg-dark h-1${radiusObj[radius] || radiusObj['full']}`} style={`width:${currentX}px`}></div>
+					<div class="bg-primary dark:bg-dark h-1{radiusObj[radius] || radiusObj['full']}" style="width:{currentX}px"></div>
 				{/if}
 			</div>
 		{/if}
 	</div>
 	{#if isRange}
-		<div class="absolute flex flex-col justify-center h-7 w-full pointer-events-none">
+		<div class="flex absolute flex-col justify-center w-full h-7 pointer-events-none">
 			<div
-				class={`${
-					lineBlock
-						? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-black'
-						: 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'
-				}${radiusObj[radius] || radiusObj['full']}`}
-				style={`transform: translateX(calc(${currentStartX}px - 50%));`}
+				class="{lineBlock
+					? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-black'
+					: 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'}{radiusObj[radius] || radiusObj['full']}"
+				style="transform: translateX(calc({currentStartX}px - 50%));"
 			>
 				{#if showTip === 'always' || (currentMove === 'start' && showTip !== 'never')}
 					<div
-						class={`absolute -top-9 text-white dark:text-black text-xs py-1 bg-black/90 dark:bg-white px-2${
-							radius === 'none' ? ' rounded-none' : ' rounded'
-						}`}
-						style={`left: 50%;transform: translateX(-50%);`}
+						class="absolute -top-9 text-white dark:text-black text-xs py-1 bg-black/90 dark:bg-white px-2{radius === 'none'
+							? ' rounded-none'
+							: ' rounded'}"
+						style="left: 50%;transform: translateX(-50%);"
 						in:fly={{ y: 8, duration: 500 }}
 						out:fly={{ y: 8, duration: 300 }}
 					>
 						{startValue}
 						<div
 							class="absolute w-0 h-0 border-4 border-t-4 border-transparent border-t-black/90 dark:border-t-white"
-							style={`top:100%;left:50%;transform: translateX(-50%)`}
+							style="top:100%;left:50%;transform: translateX(-50%)"
 						></div>
 					</div>
 				{/if}
 			</div>
 		</div>
-		<div class="absolute flex flex-col justify-center h-7 w-full pointer-events-none">
+		<div class="flex absolute flex-col justify-center w-full h-7 pointer-events-none">
 			<div
-				class={`${
-					lineBlock
-						? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-black'
-						: 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'
-				}${radiusObj[radius] || radiusObj['full']}`}
-				style={`transform: translateX(calc(${currentEndX}px - 50%));`}
+				class="{lineBlock
+					? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-black'
+					: 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'}{radiusObj[radius] || radiusObj['full']}"
+				style="transform: translateX(calc({currentEndX}px - 50%));"
 				bind:this={blockDom}
 			>
 				{#if showTip === 'always' || (currentMove === 'end' && showTip !== 'never')}
 					<div
-						class={`absolute -top-9 text-white dark:text-black text-xs py-1 bg-black/90 dark:bg-white px-2${
-							radius === 'none' ? ' rounded-none' : ' rounded'
-						}`}
-						style={`left: 50%;transform: translateX(-50%);`}
+						class="absolute -top-9 text-white dark:text-black text-xs py-1 bg-black/90 dark:bg-white px-2{radius === 'none'
+							? ' rounded-none'
+							: ' rounded'}"
+						style="left: 50%;transform: translateX(-50%);"
 						in:fly={{ y: 8, duration: 500 }}
 						out:fly={{ y: 8, duration: 300 }}
 					>
 						{endValue}
 						<div
 							class="absolute w-0 h-0 border-4 border-t-4 border-transparent border-t-black/90 dark:border-t-white"
-							style={`top:100%;left:50%;transform: translateX(-50%)`}
+							style="top:100%;left:50%;transform: translateX(-50%)"
 						></div>
 					</div>
 				{/if}
 			</div>
 		</div>
 	{:else}
-		<div class="absolute flex flex-col justify-center h-7 w-full pointer-events-none">
+		<div class="flex absolute flex-col justify-center w-full h-7 pointer-events-none">
 			<div
-				class={`${
-					lineBlock
-						? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-black'
-						: 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'
-				}${radiusObj[radius] || radiusObj['full']}`}
-				style={`transform: translateX(calc(${currentX}px - 50%));`}
+				class="{lineBlock
+					? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-black'
+					: 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'}{radiusObj[radius] || radiusObj['full']}"
+				style="transform: translateX(calc({currentX}px - 50%));"
 			>
 				{#if showTip === 'always' || (currentMove === 'one' && showTip !== 'never')}
 					<div
-						class={`absolute -top-9 text-white dark:text-black text-xs py-1 bg-black/90 dark:bg-white px-2${
-							radius === 'none' ? ' rounded-none' : ' rounded'
-						}`}
-						style={`left: 50%;transform: translateX(-50%);`}
+						class="absolute -top-9 text-white dark:text-black text-xs py-1 bg-black/90 dark:bg-white px-2{radius === 'none'
+							? ' rounded-none'
+							: ' rounded'}"
+						style="left: 50%;transform: translateX(-50%);"
 						in:fly={{ y: 8, duration: 500 }}
 						out:fly={{ y: 8, duration: 300 }}
 					>
 						{value}
 						<div
 							class="absolute w-0 h-0 border-4 border-t-4 border-transparent border-t-black/90 dark:border-t-white"
-							style={`top:100%;left:50%;transform: translateX(-50%)`}
+							style="top:100%;left:50%;transform: translateX(-50%)"
 						></div>
 					</div>
 				{/if}