45 lines
1022 B
Vue
45 lines
1022 B
Vue
<template>
|
|
<div>
|
|
<label for="default-range" :class="labelClasses">{{ label }}</label>
|
|
<input :step="steps" v-model="model" :min="min" :max="max" :disabled="disabled" id="default-range" type="range" :class="rangeClasses">
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, toRefs } from 'vue'
|
|
import { useRangeClasses } from './composables/useRangeClasses'
|
|
import type { InputSize } from '@/components/Input/types'
|
|
|
|
interface RangeProps {
|
|
modelValue?: string;
|
|
label?: string;
|
|
disabled?: boolean;
|
|
min?: string;
|
|
max?: string;
|
|
size?: InputSize;
|
|
steps?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<RangeProps>(), {
|
|
modelValue: 50,
|
|
label: 'Range slider',
|
|
disabled: false,
|
|
min: 0,
|
|
max: 100,
|
|
size: 'md',
|
|
steps: 1,
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
const model = computed({
|
|
get() {
|
|
return props.modelValue
|
|
},
|
|
set(val) {
|
|
emit('update:modelValue', val)
|
|
},
|
|
})
|
|
|
|
const { rangeClasses, labelClasses } = useRangeClasses(toRefs(props))
|
|
</script>
|