18 ejemplo eventos completo parte 8

ejemplo-eventos/src/App.svelte

@@ -1,5 +1,7 @@
 <script>
-  import Input from "./lib/input.svelte";
+  import Input from "./lib/Input.svelte";
+  import Dropdown from "./lib/Dropdown.svelte";
+  import Rangos from "./lib/Rangos.svelte";
   let estado = {
     nombre: "Manuel",
     apellido: "Gonzalez",
@@ -9,10 +11,15 @@
       max: 2000,
     },
   };
+  let sectores = ["Frontend", "Backend", "Fullstack", "Devops", "QA"];
   const envio = (e) => {
     e.preventDefault();
     alert(JSON.stringify(estado));
   };
+  const actualizarSalario = (e) => {
+    estado.salario.min = e.detail.min;
+    estado.salario.max = e.detail.max;
+  };
 </script>
 
 <main>
@@ -23,6 +30,21 @@
     <Input identificador="sector" bind:value={estado.sector} />
     <Input identificador="salario.min" bind:value={estado.salario.min} />
     <Input identificador="salario.max" bind:value={estado.salario.max} />
+    <p>
+      <Dropdown
+        identificador="sector"
+        choices={sectores}
+        bind:value={estado.sector}
+      />
+    </p>
+    <p>
+      <Rangos
+        identificador="salario"
+        min={estado.salario.min}
+        max={estado.salario.max}
+        on:update={actualizarSalario}
+      />
+    </p>
     <p>
       <input type="submit" value="Enviar" />
     </p>

ejemplo-eventos/src/lib/Dropdown.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let identificador;
+  export let choices;
+  export let value;
+</script>
+
+<main>
+  <label for={identificador}>{identificador}</label>
+  <select name={identificador} id={identificador} bind:value>
+    {#each choices as choice}
+      <option value={choice}>{choice}</option>
+    {/each}
+  </select>
+</main>

ejemplo-eventos/src/lib/Rangos.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+  export let identificador;
+  export let min;
+  export let max;
+  export const cambiarMin = (e) => {
+    const nuevoMin = e.target.value;
+    dispatch("update", { min: nuevoMin, max });
+  };
+  export const cambiarMax = (e) => {
+    const nuevoMax = e.target.value;
+    dispatch("update", { min, max: nuevoMax });
+  };
+</script>
+
+<main>
+  <label for={`${identificador}_min`}>Mínimo</label>
+  <input
+    type="range"
+    min={0}
+    max={50000}
+    bind:value={min}
+    on:change={cambiarMin}
+  /><span>{min}</span>
+  <label for={`${identificador}_max`}>Máximo</label>
+  <input
+    type="range"
+    min={0}
+    max={50000}
+    bind:value={max}
+    on:change={cambiarMax}
+  /><span>{max}</span>
+</main>