t-range-slider

This is component used to display a slider with ranges.

Basic Usage

<TRangeSlider value={[0, 25]} onChange={(value) => {}} />

Strict Mode

25 / 50

export default defineComponent({
  setup() {
    const initial = [25, 50];
    const status = ref<number[]>(initial);

    const onChange = (v: number[]) => {
      status.value = v;
    };

    const reset = () => {
      status.value = initial;
    };

    const readable = computed(() => {
      return status.value.map((s) => s.toLocaleString()).join(" / ");
    });

    return () => (
      <TCell>
        <TRangeSlider value={status.value} onChange={onChange} strict />
        <TCard design="outlined" mt="lg" py="sm" px="sm">
          <TFlex align="center" justify="between">
            <TButton color="primary" icon="mdi:refresh" onClick={reset} me>
              Reset
            </TButton>
            <TText size="sm" me>
              {readable.value}
            </TText>
          </TFlex>
        </TCard>
      </TCell>
    );
  },
});

Steps and Min Max Values

25 / 45

<TRangeSlider step="2.5" min="0" max="50" value={[25, 45]} onChange={(value) => {}} show-ticks />

Steps and Ticks

Easy
Medium
Hard
Extreme

0 / 1

<TRangeSlider
  step="1"
  min="0"
  max="3"
  value={[0, 1]}
  ticks={{
    0: "Easy",
    1: "Medium",
    2: "Hard",
    3: "Extreme",
  }}
  onChange={(value) => {}}
  show-ticks
/>

Colors and Sizes

<TRangeSlider value={[0, 50]} color="alert" size="md" />

Vertical Colors and Sizes

<TRangeSlider value={[0, 50]} direction="vertical" color="alert" size="md" />

API

No options available

Components

t-rail

Components

t-rating

Table of Contents