mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
39 lines
1.3 KiB
Vue
39 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import theme from '#build/ui/slider'
|
|
|
|
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
|
|
|
|
const value = ref(50)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-6 items-center">
|
|
<div class="flex flex-col gap-6 w-48">
|
|
<USlider v-model="value" />
|
|
<USlider :default-value="100" />
|
|
<USlider inverted />
|
|
<USlider disabled />
|
|
<USlider color="black" :model-value="50" />
|
|
<USlider color="red" :model-value="50" />
|
|
<USlider :min="4" :max="12" :step="2" :model-value="6" />
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-6 w-48">
|
|
<USlider :default-value="[0, 20]" />
|
|
<USlider :model-value="[0, 20]" />
|
|
<USlider :model-value="[0, 20, 80]" />
|
|
<USlider :model-value="[0, 80]" :min-steps-between-thumbs="20" />
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6">
|
|
<USlider v-for="size in sizes" :key="size" v-model="value" :size="size" class="w-48" />
|
|
</div>
|
|
|
|
<div class="h-48 flex items-center gap-6">
|
|
<USlider :model-value="[0, 20, 80]" orientation="vertical" />
|
|
<USlider v-model="value" orientation="vertical" />
|
|
<USlider :model-value="[0, 80]" :min-steps-between-thumbs="20" orientation="vertical" />
|
|
</div>
|
|
</div>
|
|
</template>
|