feat: migrate components in slider to runes

Author: hperrin

README.md

@@ -178,7 +178,7 @@ Svelte 5 Runes mode is being migrated to slowly. This is the todo list of compon
   - [ ] Select Menu
     - [ ] Select Helper Text
     - [ ] Select Icon
-  - [ ] Slider
+  - [x] Slider
   - [x] Switch
   - [ ] Text Field
     - [ ] Text Field Character Counter

packages/site/src/routes/demo/slider/_Continuous.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Slider
   bind:value
   min={-10}
@@ -13,5 +11,5 @@
 <script lang="ts">
   import Slider from '@smui/slider';
 
-  let value = 0;
+  let value = $state(0);
 </script>

packages/site/src/routes/demo/slider/_Disabled.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Slider disabled value={5} />
 
 <script lang="ts">

packages/site/src/routes/demo/slider/_Discrete.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Slider
   bind:value
   min={-10}
@@ -14,5 +12,5 @@
 <script lang="ts">
   import Slider from '@smui/slider';
 
-  let value = 0;
+  let value = $state(0);
 </script>

packages/site/src/routes/demo/slider/_DiscreteRange.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Slider
   range
   bind:start={valueStart}
@@ -17,6 +15,6 @@
 <script lang="ts">
   import Slider from '@smui/slider';
 
-  let valueStart = 4;
-  let valueEnd = 6;
+  let valueStart = $state(4);
+  let valueEnd = $state(6);
 </script>

packages/site/src/routes/demo/slider/_MinRange.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Slider
   range
   bind:start={valueStart}
@@ -16,6 +14,6 @@
 <script lang="ts">
   import Slider from '@smui/slider';
 
-  let valueStart = 1;
-  let valueEnd = 4;
+  let valueStart = $state(1);
+  let valueEnd = $state(4);
 </script>

packages/site/src/routes/demo/slider/_Range.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Slider
   range
   bind:start={valueStart}
@@ -25,6 +23,6 @@
   import Slider from '@smui/slider';
   import Button from '@smui/button';
 
-  let valueStart = 1;
-  let valueEnd = 4;
+  let valueStart = $state(1);
+  let valueEnd = $state(4);
 </script>

packages/site/src/routes/demo/slider/_Simple.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <FormField align="end" style="display: flex;">
   <Slider style="flex-grow: 1;" bind:value />
   {#snippet label()}
@@ -22,5 +20,5 @@
   import FormField from '@smui/form-field';
   import Button from '@smui/button';
 
-  let value = 50;
+  let value = $state(50);
 </script>

packages/site/src/routes/demo/slider/_TickMarks.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Slider
   bind:value
   min={-100}
@@ -15,5 +13,5 @@
 <script lang="ts">
   import Slider from '@smui/slider';
 
-  let value = 0;
+  let value = $state(0);
 </script>