TxRangeSelector · Vue

Intervallauswahl über einer einfachen Flächen-, Linien- oder Balkenserie.

Prop	Typ	Standard	Bedeutung
`modelValue`	`[TxRangeValue, TxRangeValue] \| undefined`	`undefined`	Kontrollierter Wert für v-model.
`min`	`number \| Date \| undefined`	`0`	Untere zulässige Grenze.
`max`	`number \| Date \| undefined`	`100`	Obere zulässige Grenze.
`step`	`number \| undefined`	`1`	Schrittweite; bei zeitlichen Vue-Bereichen in Millisekunden.
`minRange`	`number \| undefined`	`0`	Mindestabstand zwischen den Bereichsgrenzen.
`maxRange`	`number \| undefined`	`undefined`	Höchstabstand zwischen den Bereichsgrenzen.
`disabled`	`boolean \| undefined`	`false`	Sperrt die Interaktion.
`readOnly`	`boolean \| undefined`	`false`	Verhindert Änderungen des Werts.
`label`	`string \| undefined`	`Bereich`	Beschriftung beziehungsweise zugänglicher Name.
`showLabels`	`boolean \| undefined`	`true`	Zeigt die beiden Bereichsgrenzen als Text.
`dataSource`	`TxSource<Record<string, unknown>> \| undefined`	`undefined`	Liste, Konfiguration oder DataSource-Instanz; hat Vorrang vor items.
`argumentExpr`	`string \| undefined`	`argument`	Feld für die X-Achse der Serie.
`valueExpr`	`string \| undefined`	`value`	Feld für den Auswahlwert beziehungsweise Serienwert.
`seriesType`	`string \| undefined`	`area`	Seriendarstellung area/line/bar.
`tickCount`	`number \| undefined`	`5`	Anzahl der Achsenbeschriftungen.
`format`	`((v: TxRangeValue) => string) \| undefined`	`undefined`	Formatiert Bereichswerte für die Anzeige.

Ereignisse

Event	Payload / Verhalten
update:modelValue	Neuer Wert von modelValue; über v-model:modelValue übernehmen (modelValue: v-model).
valueChanged	Neuer Wert in { value }; Editoren liefern zusätzlich previousValue und event.

Slots

Slot	Argumente
default	{ value }

vue

<script setup lang="ts">
import { ref } from 'vue'
import { TxRangeSelector } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'
const range = ref<[number, number]>([20, 80])
</script>

<template>
  <TxRangeSelector v-model="range" :data-source="[{ argument: 0, value: 4 }, { argument: 100, value: 8 }]" />
</template>

TxRangeSelector.