Slider

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Slider } from "@line/abc-def-react/slider";

<script setup lang="ts">
import { Slider } from "@line/abc-def-vue/slider";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { Slider } from "@line/abc-def-react/slider";

export function Example() {
  return <Slider defaultValue={[40]} max={100} aria-label="Scale" />;
}

<script setup lang="ts">
import { Slider } from "@line/abc-def-vue/slider";
</script>

<template>
  <Slider :default-value="[40]" :max="100" aria-label="Scale" />
</template>

Component tokens

Composition exports

Usage notes

• Use for approximate values.
• Use inputs when exact values are critical.
• Related component tokens use the `slider` token group in `@line/abc-def-styles/css`.