Range API Reference

Props

Prop	Type	Default	Description
modelValue	Array	[0, 0]	v-model binding value for the range
value	Array	[0, 0]	Alternative to modelValue
disabled	Boolean	false	Disables the range input
readonly	Boolean	false	Makes the range input read-only
step	Number	0.1	Step increment for the range values
variant	String	'default'	Visual variant class (e.g. 'default', 'success')
label	String	''	Label text for the range input
min	Number	0	Minimum value of the range
max	Number	100	Maximum value of the range
thumbLabel	String/Boolean	false	Controls thumb label visibility. Options: 'always', true (show on drag/focus), false
thumbLabelClasses	Array	[]	Additional classes for thumb labels
labelClasses	Array	[]	Additional classes for the main label

Events

Event	Payload	Description
update:modelValue	Array	Emitted when range values change
change	Array	Emitted when range values change with additional context

Slots

Slot	Props	Description
label	-	Custom label content

Accessibility

The component implements the following accessibility features:

• ARIA attributes for screen readers
• Keyboard navigation support (arrow keys)
• Focus management
• Proper role attributes

Example Usage

Basic Usage

<template>
  <ORange
    v-model="rangeValues"
    :min="0"
    :max="100"
    :step="1"
    label="Price Range"
    variant="default"
  />
</template>

<script setup>
import { ref } from "vue";
import { ORange } from "your-component-library";

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

With Custom Label

<template>
  <ORange v-model="rangeValues" :min="0" :max="1000" :step="10">
    <template #label>
      <div class="custom-label">
        <span>Price Range</span>
        <small>Select your budget</small>
      </div>
    </template>
  </ORange>
</template>

<script setup>
import { ref } from "vue";
import { ORange } from "your-component-library";

const rangeValues = ref([200, 800]);
</script>

With Always Visible Thumb Labels

<template>
  <ORange
    v-model="rangeValues"
    :min="0"
    :max="24"
    :step="1"
    thumbLabel="always"
    label="Time Range"
  />
</template>

<script setup>
import { ref } from "vue";
import { ORange } from "your-component-library";

const rangeValues = ref([9, 17]);
</script>