Range

Cette page couvre :

• RangeInput
• DualRangeInput

Props

RangeInput

• min?: number
• max?: number
• step?: number
• manual?: boolean
• manualDebounce?: number

DualRangeInput

• min?: number
• max?: number
• step?: number
• manual?: boolean
• manualDebounce?: number

Variables CSS exposées

RangeInput

• --DFV-range-track-color
• --DFV-range-track-hover-color
• --DFV-range-track-active-color
• --DFV-range-thumb-color
• --DFV-range-thumb-border-color
• --DFV-range-focus
• --DFV-range-track-height
• --DFV-range-thumb-size
• --DFV-range-progress
• --DFV-range-manual-gap
• --DFV-range-manual-width
• --DFV-range-manual-justify

DualRangeInput

• --DFV-dual-range-track-color
• --DFV-dual-range-track-hover-color
• --DFV-dual-range-track-active-color
• --DFV-dual-range-thumb-color
• --DFV-dual-range-thumb-border-color
• --DFV-dual-range-focus
• --DFV-dual-range-track-height
• --DFV-dual-range-thumb-size
• --DFV-dual-range-start
• --DFV-dual-range-width
• --DFV-dual-range-gap
• --DFV-dual-range-manual-width
• --DFV-dual-range-manual-justify

Exemple

vue

<script setup lang="ts">
import {
	DualRangeInput,
	RangeInput,
} from "@duplojs/form/vueDesignSystem";
import { ref } from "vue";

const value = ref(35);
const interval = ref({
	start: 20,
	end: 80,
});
</script>

<template>
	<div style="display: grid; gap: 12px;">
		<RangeInput
			v-model="value"
			:min="0"
			:max="100"
			manual
		/>

		<DualRangeInput
			v-model="interval"
			:min="0"
			:max="100"
			manual
		/>
	</div>
</template>