Range Slider

<script setup lang="ts">
import { InlineSlider } from "@/components/orvui/motion/range-slider";
const spokenPixels = (value: number) => `${value} pixels`;
</script>
<template><div class="w-full max-w-sm"><InlineSlider :default-value="48" :min="8" :max="128" :step="8" label="Icon size" aria-label="Icon size" :format-value-text="spokenPixels" /></div></template>

<script setup lang="ts">
import { ref } from "vue";
import { RangeSlider } from "@/components/orvui/motion/range-slider";
const amount = ref(40);
</script>
<template><div class="flex w-full max-w-sm flex-col gap-3"><div class="flex items-center justify-between text-sm text-muted-foreground"><span>Drag the handle</span><span class="tabular-nums text-foreground">{{ amount }}</span></div><RangeSlider v-model="amount" :step="5" aria-label="Value" /></div></template>

<script setup lang="ts">
import { ref } from "vue";
import { FluidSlider } from "@/components/orvui/motion/range-slider";
const brightness = ref(35);
</script>
<template><div class="w-full max-w-sm"><FluidSlider v-model="brightness" label="Brightness" aria-label="Brightness" /></div></template>

<script setup lang="ts">
import { ref } from "vue";
import { WaveSlider } from "@/components/orvui/motion/range-slider";
const gain = ref(45);
</script>
<template><div class="flex w-full max-w-md flex-col gap-2"><div class="flex items-center justify-between text-sm text-muted-foreground"><span>Gain</span><span class="tabular-nums text-foreground">{{ gain }}</span></div><WaveSlider v-model="gain" aria-label="Gain" /></div></template>

<script setup lang="ts">
import { ref } from "vue";
import { BubbleSlider } from "@/components/orvui/motion/range-slider";
const amount = ref(28);
</script>
<template><div class="flex w-full max-w-sm flex-col gap-1"><span class="text-sm text-muted-foreground">Drag fast and the bubble leans</span><BubbleSlider v-model="amount" aria-label="Value" /></div></template>

<script setup lang="ts">
import { ref } from "vue";
import { RulerSlider } from "@/components/orvui/motion/range-slider";
const weight = ref(72.5);
</script>
<template><div class="w-full max-w-sm"><RulerSlider v-model="weight" :min="40" :max="120" :step=".5" :gap="12" :major-every="10" unit="kg" aria-label="Weight" /></div></template>