Slider

1<script setup lang="ts">2import { Slider, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const volume = ref(40);6const opacity = ref(0.6);7</script>8 9<template>10    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>11        <StackPanel spacing="0.375rem" class="slider-demo">12            <span id="sl-volume">Volume</span>13            <Slider v-model="volume" aria-labelledby="sl-volume" />14            <small style="color: var(--vt-text-muted-color)">Value: {{ volume }}</small>15        </StackPanel>16        <StackPanel spacing="0.375rem" class="slider-demo">17            <span id="sl-opacity">Opacity</span>18            <Slider v-model="opacity" :min="0" :max="1" :step="0.05" aria-labelledby="sl-opacity" :format-value="(v: number) => `${Math.round(v * 100)}%`" />19            <small style="color: var(--vt-text-muted-color)">Value: {{ opacity }}</small>20        </StackPanel>21    </StackPanel>22</template>23 24<style scoped>25.slider-demo {26    width: 20rem;27}28</style>

1<script setup lang="ts">2import { Slider, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const price = ref([200, 750]);6</script>7 8<template>9    <StackPanel spacing="0.375rem" class="slider-demo">10        <span id="sl-price">Price</span>11        <Slider v-model="price" range :min="0" :max="1000" :step="10" aria-labelledby="sl-price" :format-value="(v: number) => `R$ ${v}`" />12        <small style="color: var(--vt-text-muted-color)">R$ {{ price[0] }} – R$ {{ price[1] }}</small>13    </StackPanel>14</template>15 16<style scoped>17.slider-demo {18    width: 20rem;19}20</style>

1<script setup lang="ts">2import { Slider } from '@vitral/vue';3import { ref } from 'vue';4 5const bass = ref(30);6const treble = ref(70);7const temperature = ref(21);8</script>9 10<template>11    <Slider v-model="bass" orientation="vertical" aria-label="Bass" />12    <Slider v-model="treble" orientation="vertical" aria-label="Treble" />13    <Slider v-model="temperature" orientation="vertical" :min="16" :max="30" :step="0.5" aria-label="Temperature" :format-value="(v: number) => `${v} °C`" />14    <small style="color: var(--vt-text-muted-color)">Bass {{ bass }} · Treble {{ treble }} · {{ temperature }} °C</small>15</template>

1<script setup lang="ts">2import { Slider, StackPanel } from '@vitral/vue';3</script>4 5<template>6    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>7        <StackPanel spacing="0.375rem" class="slider-demo">8            <Slider :model-value="60" disabled aria-label="Disabled" />9        </StackPanel>10        <StackPanel spacing="0.375rem" class="slider-demo">11            <Slider :model-value="[25, 75]" range disabled :aria-label="['Disabled start', 'Disabled end']" />12        </StackPanel>13    </StackPanel>14</template>15 16<style scoped>17.slider-demo {18    width: 20rem;19}20</style>