Slider

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download slider -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

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

const Component = UI.Slider;

const args = reactive(
  {
    "value": [50],
    "min": 0,
    "max": 100,
    "step": 1,
    "disabled": false,
  } satisfies Partial<
    InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown>,
);
</script>

<template>
  <Slider
    v-model="args.value"
    :min="args.min"
    :max="args.max"
    :step="args.step"
    :disabled="args.disabled"
  />
</template>

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Examples

Default

<script setup lang="ts">
import { Slider } from "@/components/ui/slider";
import * as UI from "@/components/ui/slider";

const Component = UI.Slider;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Slider
    v-bind="args"
    :default-value="[50]"
    :max="100"
    :step="1"
    class="w-[60%] min-w-[240px]"
  />
</template>

Range

<script setup lang="ts">
import { Slider } from "@/components/ui/slider";
import * as UI from "@/components/ui/slider";

const Component = UI.Slider;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Slider
    :default-value="[25, 75]"
    :max="100"
    :step="1"
    class="w-[60%] min-w-[240px]"
  />
</template>

Steps

<script setup lang="ts">
import { Slider } from "@/components/ui/slider";
import * as UI from "@/components/ui/slider";

const Component = UI.Slider;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

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

Disabled

<script setup lang="ts">
import { Slider } from "@/components/ui/slider";
import * as UI from "@/components/ui/slider";

const Component = UI.Slider;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

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

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.