frontend/src/lib/components/InputRange.svelte

<script lang="ts">
  import type { FieldProps } from "$lib/types";
  import { onMount } from "svelte";
  let { value = $bindable(), params }: { value: number; params: FieldProps } =
    $props();

  onMount(() => {
    value = Number(params?.default ?? "");
  });
</script>

<div class="grid max-w-md grid-cols-4 items-center gap-3">
  <label class="text-sm font-medium" for={params.id}>{params?.title}</label>
  <input
    class="col-span-2 h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-300 dark:bg-gray-500"
    bind:value
    type="range"
    id={params.id}
    name={params.id}
    min={params?.min}
    max={params?.max}
    step={params?.step ?? 1}
  />
  <input
    type="number"
    step={params?.step ?? 1}
    bind:value
    class="rounded-md border px-1 py-1 text-center text-xs font-bold dark:text-black"
  />
</div>
<!-- 
<style lang="postcss" scoped>
  input[type='range']::-webkit-slider-runnable-track {
    @apply h-2 cursor-pointer rounded-lg dark:bg-gray-50;
  }
  input[type='range']::-webkit-slider-thumb {
    @apply cursor-pointer rounded-lg dark:bg-gray-50;
  }
  input[type='range']::-moz-range-track {
    @apply cursor-pointer rounded-lg dark:bg-gray-50;
  }
  input[type='range']::-moz-range-thumb {
    @apply cursor-pointer rounded-lg dark:bg-gray-50;
  }
  input[type='range']::-ms-track {
    @apply cursor-pointer rounded-lg dark:bg-gray-50;
  }
  input[type='range']::-ms-thumb {
    @apply cursor-pointer rounded-lg dark:bg-gray-50;
  }
</style> -->