fix(slider): add style

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",

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>

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>

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 />