Slider 滑块

<script setup lang="ts">
  import { ref } from 'vue'
  import { Slider, Stack, Text } from '@hina-ui/vue'

  const brightness = ref(40)
</script>

<template>
  <Stack gap="sm" class="w-64">
    <Slider v-model="brightness" aria-label="亮度" />
    <Text size="sm" tone="muted">当前值：{{ brightness }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Slider } from '@hina-ui/vue'

  const rating = ref(3.5)
</script>

<template>
  <Slider v-model="rating" :min="1" :max="5" :step="0.5" aria-label="评分" class="w-64" />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Slider, Stack, Text } from '@hina-ui/vue'

  const value = ref(25)
  const marks = [0, 25, 50, 75, 100].map(value => ({ value, label: String(value) }))
</script>

<template>
  <Stack gap="lg" class="w-72 max-w-full">
    <Stack v-for="dir in ['ltr', 'rtl'] as const" :key="dir" gap="xs">
      <Text size="sm" tone="muted">{{ dir.toUpperCase() }}</Text>
      <Slider
        v-model="value"
        :dir="dir"
        :marks="marks"
        :step="5"
        :aria-label="'数值 (' + dir.toUpperCase() + ')'"
      />
    </Stack>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Slider } from '@hina-ui/vue'

  const speed = ref(50)
  const marks = [
    { value: 0, label: '慢' },
    { value: 25 },
    { value: 50, label: '中' },
    { value: 75 },
    { value: 100, label: '快' },
  ]
</script>

<template>
  <Slider v-model="speed" :step="25" :marks="marks" aria-label="翻页速度" class="w-64" />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Slider, Stack } from '@hina-ui/vue'

  const quality = ref(80)
  const opacity = ref(30)
</script>

<template>
  <Stack gap="lg" class="w-64 pt-6">
    <Slider
      v-model="quality"
      label="always"
      :format="(v: number) => `${v}%`"
      aria-label="图片质量"
    />
    <Slider v-model="opacity" label="none" aria-label="遮罩透明度" />
  </Stack>
</template>

<script setup lang="ts">
  import { Slider, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack gap="sm" class="w-64">
    <Slider size="sm" :model-value="30" aria-label="小号" />
    <Slider size="md" :model-value="50" aria-label="中号" />
    <Slider size="lg" :model-value="70" aria-label="大号" />
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Slider, Stack, Text } from '@hina-ui/vue'

  const value = ref(20)
  const committed = ref(20)
</script>

<template>
  <Stack gap="sm" class="w-64">
    <Slider v-model="value" aria-label="阈值" @commit="committed = $event" />
    <Text size="sm" tone="muted">拖动中：{{ value }}，松手后：{{ committed }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { Button, Form, FormField, Slider, Text } from '@hina-ui/vue'

  const schema = v.object({
    quality: v.pipe(v.number(), v.minValue(60, '画质不能低于 60')),
  })

  const values = reactive({ quality: 40 })
  const saved = ref('')

  async function save(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 600))
    saved.value = JSON.stringify(data)
  }
</script>

<template>
  <Form v-slot="{ submitting }" :values="values" :rules="schema" class="w-80" @submit="save">
    <FormField name="quality" label="导出画质" description="60 以下的画质会明显失真">
      <Slider v-model="values.quality" :min="0" :max="100" :step="5" />
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">导出</Button>
    <Text v-if="saved" tone="muted" size="sm">已导出：{{ saved }}</Text>
  </Form>
</template>