Slider

Use slider for numeric inputs with a bounded range, such as volume, price filters, or brightness, where dragging feels more natural than typing a number. It renders one thumb per value in model-value, so binding an array gives you a range slider for free.

<script setup lang="ts">
import { ref } from "vue";
import { Slider } from "@/components/ui/slider";

const value = ref([50]);
</script>

<template>
  <Slider v-model="value" :max="100" :step="1" class="w-[60%]" />
</template>

Built on reka-ui's Slider primitive.