10.1k

Slider

PreviousNext

An input where the user selects a value from within a given range.

Docs API Reference 
<script setup lang="ts">
import { Slider } from '@/components/ui/slider'
</script>

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

Installation

pnpm dlx @frontic/ui add slider

Usage

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

<template>
  <Slider :default-value="[33]" :max="100" :step="1" />
</template>

Examples

Label

Use the label prop to add an accessible label above the slider.

<Slider label="Volume" :default-value="[50]" :max="100" :step="1" />

Legend

Use the show-legend prop to display min/max values below the slider.

01000
<Slider label="Price" show-legend :default-value="[250]" :min="0" :max="1000" :step="10" />

Range

Pass an array with two values to create a range slider with two thumbs.

01000
<Slider label="Price Range" show-legend :default-value="[100, 500]" :min="0" :max="1000" :step="10" />
SkeletonSonner