Vue Component Library

Appearance

Slider Component Demos ​

Basic Slider ​

A simple slider with default configuration.

vue
<template>
  <OSlider v-model="value" label="Basic Slider" :min="0" :max="100" />
</template>

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

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

Slider with Different Steps ​

Sliders with different step values.

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

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

const value1 = ref(50);
const value2 = ref(50);
const value3 = ref(50);
</script>

Variant Styles ​

Sliders with different variant styles.

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

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

const value1 = ref(50);
const value2 = ref(50);
</script>

Thumb Label Variations ​

Sliders with different thumb label configurations.

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

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

const value1 = ref(50);
const value2 = ref(50);
const value3 = ref(50);
</script>
50.0

Custom Label ​

Slider with a custom label using the label slot.

vue
<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';

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

Disabled and Readonly States ​

Sliders in disabled and readonly states.

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

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

const value1 = ref(50);
const value2 = ref(50);
const value3 = ref(50);
</script>

Custom Range ​

Sliders with different min/max ranges.

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

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

const value1 = ref(50);
const value2 = ref(0);
const value3 = ref(500);
</script>