Slider

<script setup lang="ts">
const volume = ref(60);
</script>

<template>
  <UiSlider v-model="volume" label="Volume" :format-value="(v) => `${v}%`" />
</template>

<script setup lang="ts">
const price = ref<[number, number]>([200, 800]);
const toast = useToast();
</script>

<template>
  <div class="demo-stack">
    <UiSlider
      v-model="price"
      label="Price"
      :min="0"
      :max="1000"
      :step="10"
      :format-value="(v) => `$${v}`"
      @commit="([low, high]) => toast.info(`Filtering $${low}–$${high}`)"
    />
    <p class="demo-note">${{ price[0] }} – ${{ price[1] }}</p>
  </div>
</template>

<script setup lang="ts">
const bass = ref(4);
const treble = ref(-2);
</script>

<template>
  <div class="demo-row">
    <UiSlider v-model="bass" orientation="vertical" label="Bass" :min="-12" :max="12" />
    <UiSlider v-model="treble" orientation="vertical" label="Treble" :min="-12" :max="12" />
  </div>
</template>