Slider API Reference

Props

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

Events

Event	Payload	Description
update:modelValue	Number	Emitted when the value changes
change	Number	Emitted when the value changes with additional context

Slots

Slot	Props	Description
label	-	Custom label content

Accessibility

The slider component implements the following ARIA attributes:

• role="slider"
• aria-valuemin: Set to the min prop value
• aria-valuemax: Set to the max prop value
• aria-valuenow: Current value of the slider
• aria-disabled: Set based on the disabled prop
• aria-readonly: Set based on the readonly prop

Keyboard Navigation

The slider supports the following keyboard interactions:

• ArrowRight: Increase value by step amount
• ArrowLeft: Decrease value by step amount

Example Usage

Basic Usage

<template>
  <OSlider
    v-model="value"
    label="Volume"
    :min="0"
    :max="100"
    :step="1"
    variant="default"
  />
</template>

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

const value = ref(50);
</script>

With Custom Label

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

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

const value = ref(50);
</script>

<style>
.custom-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.value {
  color: #666;
}
</style>

Disabled State

<template>
  <OSlider v-model="value" label="Disabled Slider" :disabled="true" />
</template>

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

const value = ref(50);
</script>

Variant and Thumb Label

<template>
  <OSlider
    v-model="value"
    label="Success Variant"
    variant="success"
    thumbLabel="always"
    :min="0"
    :max="100"
  />
</template>

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

const value = ref(50);
</script>