Vue Component Library

Appearance

Range Component Demos ​

Basic Range ​

A simple range with default configuration.

vue
<template>
  <ORange v-model="rangeValues" label="Basic Range" :min="0" :max="100" />
</template>

<script setup>
import { ref } from 'vue';

const rangeValues = ref([20, 80]);
</script>

Range with Different Steps ​

Ranges with different step values.

vue
<template>
  <div class="step-demo">
    <ORange
      v-model="value1"
      label="Step: 0.1"
      :step="0.1"
      :min="0"
      :max="100"
    />
    <ORange v-model="value2" label="Step: 1" :step="1" :min="0" :max="100" />
    <ORange v-model="value3" label="Step: 5" :step="5" :min="0" :max="100" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref([30, 70]);
const value2 = ref([20, 80]);
const value3 = ref([10, 90]);
</script>

Variant Styles ​

Ranges with different variant styles.

vue
<template>
  <div class="variant-demo">
    <ORange
      v-model="value1"
      label="Default Variant"
      variant="default"
      :min="0"
      :max="100"
    />
    <ORange
      v-model="value2"
      label="Success Variant"
      variant="success"
      :min="0"
      :max="100"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref([30, 70]);
const value2 = ref([20, 80]);
</script>

Thumb Label Variations ​

Ranges with different thumb label configurations.

vue
<template>
  <div class="thumb-label-demo">
    <ORange
      v-model="value1"
      label="Always Show Label"
      thumbLabel="always"
      :min="0"
      :max="100"
    />
    <ORange
      v-model="value2"
      label="Show on Drag/Focus"
      :thumbLabel="true"
      :min="0"
      :max="100"
    />
    <ORange v-model="value3" label="No Label" :min="0" :max="100" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref([30, 70]);
const value2 = ref([20, 80]);
const value3 = ref([10, 90]);
</script>
30.0
70.0

Custom Label ​

Range with a custom label using the label slot.

vue
<template>
  <ORange v-model="value" :min="0" :max="100">
    <template #label>
      <div class="custom-label">
        <span>Custom Label</span>
        <span class="value">{{ value[0] }}-{{ value[1] }}</span>
      </div>
    </template>
  </ORange>
</template>

<script setup>
import { ref } from 'vue';

const value = ref([50, 50]);
</script>
Custom Label50-50

Disabled and Readonly States ​

Range in disabled and readonly states.

vue
<template>
  <div class="state-demo">
    <ORange v-model="value1" label="Normal Range" :min="0" :max="100" />
    <ORange
      v-model="value2"
      label="Disabled Range"
      :disabled="true"
      :min="0"
      :max="100"
    />
    <ORange
      v-model="value3"
      label="Readonly Range"
      :readonly="true"
      :min="0"
      :max="100"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref([30, 70]);
const value2 = ref([20, 80]);
const value3 = ref([10, 90]);
</script>

Custom Range ​

Range with different min/max ranges.

vue
<template>
  <div class="range-demo">
    <ORange v-model="value1" label="0 to 100" :min="0" :max="100" />
    <ORange v-model="value2" label="-50 to 50" :min="-50" :max="50" />
    <ORange
      v-model="value3"
      label="0 to 1000"
      :min="0"
      :max="1000"
      :step="10"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref([0, 100]);
const value2 = ref([-25, 25]);
const value3 = ref([0, 1000]);
</script>