RangeSlider 范围滑块

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

  const year = ref<[number, number]>([2010, 2020])
</script>

<template>
  <Stack gap="sm" class="w-64">
    <RangeSlider v-model="year" :min="1990" :max="2026" aria-label="年份" />
    <Text size="sm" tone="muted">当前值：{{ year[0] }} 至 {{ year[1] }}</Text>
  </Stack>
</template>

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

  const value = ref<[number, number]>([25, 75])
  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>
      <RangeSlider
        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 { RangeSlider } from '@hina-ui/vue'

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

<template>
  <RangeSlider v-model="range" :step="25" :marks="marks" aria-label="区间" class="w-64" />
</template>

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

  const hours = ref<[number, number]>([9, 18])
</script>

<template>
  <Stack gap="sm" class="w-64">
    <RangeSlider v-model="hours" :max="24" :min-steps="4" label="always" aria-label="营业时间" />
    <Text size="sm" tone="muted">两个拇指之间至少相隔四步</Text>
  </Stack>
</template>

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

  const discount = ref<[number, number]>([20, 60])
  const hidden = ref<[number, number]>([30, 70])
</script>

<template>
  <Stack gap="lg" class="w-64 pt-6">
    <RangeSlider
      v-model="discount"
      label="always"
      :format="(v: number) => `${v}%`"
      aria-label="折扣区间"
    />
    <RangeSlider v-model="hidden" label="none" aria-label="不显示标签" />
  </Stack>
</template>

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

<template>
  <Stack gap="sm" class="w-64">
    <RangeSlider size="sm" :model-value="[20, 60]" aria-label="小号" />
    <RangeSlider size="md" :model-value="[20, 60]" aria-label="中号" />
    <RangeSlider size="lg" :model-value="[20, 60]" aria-label="大号" />
  </Stack>
</template>

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

  const schema = v.object({
    budget: v.pipe(
      v.tuple([v.number(), v.number()]),
      v.check(([low, high]) => high - low >= 200, '预算区间至少相差 200 元'),
    ),
  })

  const values = reactive({ budget: [300, 400] as [number, number] })
  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="budget" label="预算" description="拖动两端设定区间">
      <RangeSlider v-model="values.budget" :min="0" :max="1000" :step="50" />
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">保存</Button>
    <Text v-if="saved" tone="muted" size="sm">已保存：{{ saved }}</Text>
  </Form>
</template>