%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper,headsepline,footsepline]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
% Funktioniert nicht \usepackage[automark]{scrpage2}%
\usepackage[automark]{scrlayer-scrpage}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

% Single quotes
\usepackage{upquote,textcomp}

% mehrere Spalten
\usepackage{multicol}

%Kopfzeile
\ihead{Svelte 5}
\chead{}
\ohead{http://kohnlehome.de/js/svelte5-component.pdf}
%\setheadsepline{0.5pt}

%Fußzeile
%\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Single Quotes
\newcommand\upquote[1]{\textquotesingle#1\textquotesingle}

% Überschrift 
\begin{center}
  \LARGE % Schriftgröße
  \bfseries % Fettdruck
  \sffamily % Serifenlose Schrift
  Svelte 5: Component
\end{center}



\section*{Slider.svelte}
\begin{verbatim}
<script>
  let {
      labelText = "Entfernung",
      sliderMin = "0",
      sliderMax = "10",
      sliderValue = $bindable(0), // Child -> Parent
      sliderEinheit = "m",
      sliderAction,               // EventListener
  } = $props();
</script>

<div>
  <label for="inputSlider">{labelText}</label>
  <input
      id="inputSlider"
      type="range"
      min={sliderMin}
      max={sliderMax}
      bind:value={sliderValue}
      oninput={sliderAction}
  />
  <p>{sliderValue} {sliderEinheit}</p>
</div>
\end{verbatim}

\section*{+page.svelte}
\begin{verbatim}
<script>
  import Slider from "$lib/components/Slider.svelte";

  let spannungInVolt = $state(5);
  const sliderAction = () => {
    console.log("Slider wurde bewegt");
  };
</script>

<Slider
    labelText="Spannung"
    sliderMin="-5"
    sliderMax="5"
    bind:sliderValue={spannungInVolt}
    sliderEinheit="V"
    {sliderAction}
/>
<p>Spannung: {spannungInVolt} V</p>
\end{verbatim}


\end{document}
