HopeKitAppearance
Slider #
Drag the slider within a fixed range.
Basic Usage #
The current value is displayed when the slider is being dragged.
<template>
<div class="">
<HcSlider v-model="value" />
</div>
</template>
<script lang="ts" setup>
import { HcSlider } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const value = ref(0);
</script>
Props #
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| modelValue | Number,Number[] | NumberNumber[] | binding value | false |
| customClass | String | String | slider class |
Events #
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| update:model-value | Function | value - number | number[] | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) |