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.

550
<template>
<CRangeSlider show-input :model-value="50" :min="5" :max="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

label
string
step
number
1
id
string
modelValue
number
errors
string[]
min
number
0
max
number
100
defaultValue
number
disabled
boolean
showInput
boolean
false
tooltip
boolean
true

\