Range Slider

Display a range slider element.

Usage

Example

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.

showInput

min

max

Example

550

      <template>
  <CRangeSlider show-input v-model="value" :min="5" :max="50" label="Example" />
</template>

Disabled

disabled

Example

0100

      <template>
  <CRangeSlider disabled v-model="value" label="Example" />
</template>

Errors

Example

0100

Example errors

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

Props

Prop	Default	Type
`id`		`string`
`disabled`		`boolean`
`min`	`0`	`number`
`max`	`100`	`number`
`label`		`string`
`showInput`	`false`	`boolean`
`step`	`1`	`number`
`errors`		`string[]`
`defaultValue`		`number`
`tooltip`	`true`	`boolean`
`variant`	`'subtle'`	`"outlined" \| "subtle"`
`modelValue`		`number`