Slider

<link
  rel="component"
  href="@threadlabs/looma/components/ui-slider/ui-slider.html"
>

<ui-slider
  label="Sam’s focus time"
  value="25"
  min="5"
  max="60"
  step="5"
  unit="min"
></ui-slider>

<script setup>
  import { UiSlider } from "@threadlabs/looma";
</script>

<template>
  <UiSlider
    label="Sam’s focus time"
    :value="25"
    :min="5"
    :max="60"
    :step="5"
    unit="min"
  />
</template>

import { UiSlider } from "@threadlabs/looma";

export default function Example() {
  return <UiSlider
    label="Sam’s focus time"
    value={25}
    min={5}
    max={60}
    step={5}
    unit="min"
  />;
}

/** @jsxImportSource preact */
import { UiSlider } from "@threadlabs/looma";

export default function Example() {
  return <UiSlider
    label="Sam’s focus time"
    value={25}
    min={5}
    max={60}
    step={5}
    unit="min"
  />;
}

<script>
  import { UiSlider } from "@threadlabs/looma";
</script>

<UiSlider
  label="Sam’s focus time"
  value={25}
  min={5}
  max={60}
  step={5}
  unit="min"
/>

import { Component } from "@angular/core";
import { UiSlider } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiSlider],
  template: `
    <span
      ui-slider
      [label]="'Sam’s focus time'"
      [value]="25"
      [min]="5"
      [max]="60"
      [step]="5"
      [unit]="'min'"
    ></span>
  `,
})
export default class Example {}