Range Slider

Display a range slider element.

Usage

020
<script lang="ts" setup>
const value = ref(10)
</script>

<template>
  <CRangeSlider
    v-model="value"
    label="Example"
    :max="20"
  />
</template>

Show input

Show the current value input box horizontally with the slider.

0100
<template>
<CRangeSlider show-input :model-value="50" label="Example" />
</template>

Disabled

0100
<template>
<CRangeSlider disabled :model-value="50" label="Example" />
</template>

Errors

0100
  • Example errors
<template>
<CRangeSlider disabled :model-value="50" label="Example" :errors="['Example errors']" />
</template>

Props

modelValuerequired
number
step
number
1
min
number
0
max
number
100
label
string
id
string
errors
string[]
showInput
boolean
false
disabled
boolean