Komponenten-Showcase

DaisyRange

Ein einfaches Nutzungsbeispiel aus vue-daisyui-components – ohne zusätzliche Anwendungslogik.

Props-Referenz

Definitionen aus defineProps der installierten Komponente. Eine aktivierte Checkbox kennzeichnet ein erforderliches Prop. Typnamen verweisen auf die Typen der Bibliothek.

DaisyRange – Props-Referenz
Beschreibung	Erforderlich	Name	Typ
		`className`	`string`
		`disabled`	`boolean`
		`max`	`number`
		`min`	`number`
		`modelValue`	`number`
		`name`	`string`
		`step`	`number`

Live-Vorschau

Lautstärke: 40

Für dein Projekt

DaisyRange – Vollständiger Vue-Code

<script setup lang="ts">
import { ref } from 'vue'
import DaisyRange from 'vue-daisyui-components/components/DaisyRange.vue'

const volume = ref(40)
</script>

<template>
  <label class="flex max-w-md flex-col gap-3">
    <span>Lautstärke: {{ volume }}</span>
    <DaisyRange v-model="volume" name="volume" :min="0" :max="100" :step="10" class-name="range-primary" />
  </label>
</template>