TxRangeSelector · Vue

Interval selection over a simple area, line or bar series.

Prop	Type	Default	Meaning
`modelValue`	`[TxRangeValue, TxRangeValue] \| undefined`	`undefined`	Controlled v-model value.
`min`	`number \| Date \| undefined`	`0`	Lower allowed bound.
`max`	`number \| Date \| undefined`	`100`	Upper allowed bound.
`step`	`number \| undefined`	`1`	Step size; milliseconds for Vue date ranges.
`minRange`	`number \| undefined`	`0`	Minimum distance between range bounds.
`maxRange`	`number \| undefined`	`undefined`	Maximum distance between range bounds.
`disabled`	`boolean \| undefined`	`false`	Disables interaction.
`readOnly`	`boolean \| undefined`	`false`	Prevents value changes.
`label`	`string \| undefined`	`Bereich`	Label or accessible name.
`showLabels`	`boolean \| undefined`	`true`	Displays both range bounds as text.
`dataSource`	`TxSource<Record<string, unknown>> \| undefined`	`undefined`	List, configuration or DataSource instance; takes precedence over items.
`argumentExpr`	`string \| undefined`	`argument`	Field for the series X axis.
`valueExpr`	`string \| undefined`	`value`	Field used for the option value or series value.
`seriesType`	`string \| undefined`	`area`	Series appearance: area/line/bar.
`tickCount`	`number \| undefined`	`5`	Number of axis labels.
`format`	`((v: TxRangeValue) => string) \| undefined`	`undefined`	Formats range values for display.

Events

Event	Payload / behavior
update:modelValue	New modelValue value; accept using v-model:modelValue (modelValue: v-model).
valueChanged	New value in { value }; editors also include previousValue and event.

Slots

Slot	Arguments
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.