diff --git a/packages/slider/package.json b/packages/slider/package.json
index f2805c2f..8edd22d5 100644
--- a/packages/slider/package.json
+++ b/packages/slider/package.json
@@ -35,9 +35,11 @@
     "registry": "https://registry.npmjs.org"
   },
   "devDependencies": {
+    "@svelement-ui/input-number": "workspace:^",
     "@svelement-ui/theme-chalk": "workspace:^",
     "@svelement-ui/util-array-2-class-string": "workspace:^",
-    "@svelement-ui/util-array-2-style-string": "workspace:^"
+    "@svelement-ui/util-array-2-style-string": "workspace:^",
+    "to-style": "^1.3.3"
   },
   "repository": {
     "type": "git",
diff --git a/packages/slider/src/lib/button.svelte b/packages/slider/src/lib/button.svelte
new file mode 100644
index 00000000..aa6c6ec2
--- /dev/null
+++ b/packages/slider/src/lib/button.svelte
@@ -0,0 +1,17 @@
+<script>
+  import a2s from '@svelement-ui/util-array-2-class-string';
+
+  $: hovering = false;
+  $: dragging = false;
+  $: wrapperClass = a2s([
+    `svel-slider__button-wrapper`,
+    ['hover', hovering],
+    ['dragging', dragging],
+  ]);
+  $: wrapperStyle = null;
+  $: buttonClass = a2s([`svel-slider__button`, ['hover', hovering], ['dragging', dragging]]);
+</script>
+
+<div class={wrapperClass} style={wrapperStyle}>
+  <div class={buttonClass} />
+</div>
diff --git a/packages/slider/src/lib/slider.svelte b/packages/slider/src/lib/slider.svelte
index df4c151e..6ce30af8 100644
--- a/packages/slider/src/lib/slider.svelte
+++ b/packages/slider/src/lib/slider.svelte
@@ -1,11 +1,16 @@
 <script>
+  import SvelInputNumber from '@svelement-ui/input-number';
+  import Button from '$lib/button.svelte';
+
+  let slider;
+
+  let firstValue;
 </script>
 
 <div class="svel-slider">
-  <div class="svel-slider__runway">
+  <div bind:this={slider} class="svel-slider__runway">
     <div class="svel-slider__bar" />
-    <div class="svel-slider__button-wrapper">
-      <div class="svel-slider__button" />
-    </div>
+    <Button />
   </div>
+  <SvelInputNumber bind:value={firstValue} />
 </div>
diff --git a/packages/slider/src/routes/+page.svelte b/packages/slider/src/routes/+page.svelte
index dc2589b6..ec89bd4a 100644
--- a/packages/slider/src/routes/+page.svelte
+++ b/packages/slider/src/routes/+page.svelte
@@ -1,10 +1,5 @@
 <script>
   import SvelSlider from '$lib/index.js';
-
-  let list = [];
-  for (let i = 0; i < 10; i++) {
-    list.push(i);
-  }
 </script>
 
 <SvelSlider />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71f19d6a..65e269fd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -325,6 +325,9 @@ importers:
 
   packages/slider:
     devDependencies:
+      '@svelement-ui/input-number':
+        specifier: workspace:^
+        version: link:../input-number
       '@svelement-ui/theme-chalk':
         specifier: workspace:^
         version: link:../theme-chalk
@@ -334,6 +337,9 @@ importers:
       '@svelement-ui/util-array-2-style-string':
         specifier: workspace:^
         version: link:../util-array-2-style-string
+      to-style:
+        specifier: ^1.3.3
+        version: 1.3.3
 
   packages/theme-chalk: {}