Dateslider

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

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

pnpm exec frontfriend download date-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 { DateSlider } from "@/components/ui/date-slider";
import { DateSliderTrigger } from "@/components/ui/date-slider";
import { DateSliderContent } from "@/components/ui/date-slider";

const args = {
  "presets": true,
  "triggerText": "Pick a date",
  "dialogTitle": "Choose a date",
  "dialogButtonText": "Apply",
  "presetsValues": [
      { preset: "default", label: "By single day" },
      { preset: "range", label: "By days range" },
      { preset: "weeks", label: "By weeks" },
      { preset: "months", label: "By months" },
      { preset: "years", label: "By years" },
  ],
  "variant": "default",
  "dialog": true,
} satisfies Record<string, unknown> & {
  variant?: "default" | "range" | "weeks" | "months" | "years";
};
</script>

<template>
  <DateSlider v-bind="args"
    ><DateSliderTrigger :trigger-text="args.triggerText" /><DateSliderContent
  /></DateSlider>
</template>

Examples

Default

<script setup lang="ts">
import { ref } from "vue";
import { today } from "@internationalized/date";
import { getLocalTimeZone } from "@internationalized/date";
import type { Ref } from "vue";
import type { DateValue } from "@internationalized/date";
import { useDateFormatter } from "radix-vue";
import { toDate } from "radix-vue/date";
import { DateSlider } from "@/components/ui/date-slider";
import { DateSliderTrigger } from "@/components/ui/date-slider";
import { DateSliderContent } from "@/components/ui/date-slider";

function dateLabel(value: unknown): string {
  if (value && typeof value === "object" && "start" in value && "end" in value)
    return String(value.start) + " – " + String(value.end);
  return value == null ? "Select a date" : String(value);
}

const formatter = useDateFormatter("en-US");

const args = {
  "presets": true,
  "triggerText": "Pick a date",
  "dialogTitle": "",
  "dialogButtonText": "",
  "presetsValues": [
      { preset: "default", label: "By single day" },
      { preset: "range", label: "By days range" },
      { preset: "weeks", label: "By weeks" },
      { preset: "months", label: "By months" },
      { preset: "years", label: "By years" },
  ],
};
const value = ref(today(getLocalTimeZone())) as Ref<DateValue>;
</script>

<template>
  <DateSlider>
    <DateSliderTrigger v-bind="args" />
    <DateSliderContent v-slot="{ date }">{{
      dateLabel(date)
    }}</DateSliderContent>
  </DateSlider>
</template>

Range

<script setup lang="ts">
import { ref } from "vue";
import { today } from "@internationalized/date";
import { getLocalTimeZone } from "@internationalized/date";
import type { Ref } from "vue";
import type { DateValue } from "@internationalized/date";
import { useDateFormatter } from "radix-vue";
import { toDate } from "radix-vue/date";
import { DateSlider } from "@/components/ui/date-slider";
import { DateSliderTrigger } from "@/components/ui/date-slider";
import { DateSliderContent } from "@/components/ui/date-slider";

function dateLabel(value: unknown): string {
  if (value && typeof value === "object" && "start" in value && "end" in value)
    return String(value.start) + " – " + String(value.end);
  return value == null ? "Select a date" : String(value);
}

const formatter = useDateFormatter("en-US");

const args = {
  "presets": true,
  "triggerText": "Pick a date",
  "dialogTitle": "",
  "dialogButtonText": "",
  "presetsValues": [
      { preset: "default", label: "By single day" },
      { preset: "range", label: "By days range" },
      { preset: "weeks", label: "By weeks" },
      { preset: "months", label: "By months" },
      { preset: "years", label: "By years" },
  ],
  "variant": "range",
  "default": undefined,
} satisfies Record<string, unknown> & {
  variant?: "default" | "range" | "years" | "months" | "weeks";
};
const value = ref(today(getLocalTimeZone())) as Ref<DateValue>;
</script>

<template>
  <DateSlider>
    <DateSliderTrigger v-bind="args" v-if="args.default">{{
      args.default
    }}</DateSliderTrigger>
    <DateSliderTrigger v-bind="args" v-else />
    <DateSliderContent v-slot="{ date }">{{
      dateLabel(date)
    }}</DateSliderContent>
  </DateSlider>
</template>

Weeks

<script setup lang="ts">
import { DateSlider } from "@/components/ui/date-slider";
import { DateSliderTrigger } from "@/components/ui/date-slider";
import { DateSliderContent } from "@/components/ui/date-slider";

const args = {
  "presets": true,
  "triggerText": "Pick a date",
  "dialogTitle": "",
  "dialogButtonText": "",
  "presetsValues": [
      { preset: "default", label: "By single day" },
      { preset: "range", label: "By days range" },
      { preset: "weeks", label: "By weeks" },
      { preset: "months", label: "By months" },
      { preset: "years", label: "By years" },
  ],
};
</script>

<template>
  <DateSlider variant="weeks"
    ><DateSliderTrigger /><DateSliderContent
  /></DateSlider>
</template>

Months

<script setup lang="ts">
import { ref } from "vue";
import { today } from "@internationalized/date";
import { getLocalTimeZone } from "@internationalized/date";
import type { Ref } from "vue";
import type { DateValue } from "@internationalized/date";
import { useDateFormatter } from "radix-vue";
import { toDate } from "radix-vue/date";
import { DateSlider } from "@/components/ui/date-slider";
import { DateSliderTrigger } from "@/components/ui/date-slider";
import { DateSliderContent } from "@/components/ui/date-slider";

function dateLabel(value: unknown): string {
  if (value && typeof value === "object" && "start" in value && "end" in value)
    return String(value.start) + " – " + String(value.end);
  return value == null ? "Select a date" : String(value);
}

const formatter = useDateFormatter("en-US");

const args = {
  "presets": true,
  "triggerText": "Pick a date",
  "dialogTitle": "",
  "dialogButtonText": "",
  "presetsValues": [
      { preset: "default", label: "By single day" },
      { preset: "range", label: "By days range" },
      { preset: "weeks", label: "By weeks" },
      { preset: "months", label: "By months" },
      { preset: "years", label: "By years" },
  ],
  "variant": "months",
  "default": undefined,
} satisfies Record<string, unknown> & {
  variant?: "default" | "range" | "years" | "months" | "weeks";
};
const value = ref(today(getLocalTimeZone())) as Ref<DateValue>;
</script>

<template>
  <DateSlider>
    <DateSliderTrigger v-bind="args" v-if="args.default">{{
      args.default
    }}</DateSliderTrigger>
    <DateSliderTrigger v-bind="args" v-else />
    <DateSliderContent v-slot="{ date }">{{
      dateLabel(date)
    }}</DateSliderContent>
  </DateSlider>
</template>

Years

<script setup lang="ts">
import { DateSlider } from "@/components/ui/date-slider";
import { DateSliderTrigger } from "@/components/ui/date-slider";
import { DateSliderContent } from "@/components/ui/date-slider";

const args = {
  "presets": true,
  "triggerText": "Pick a date",
  "dialogTitle": "",
  "dialogButtonText": "",
  "presetsValues": [
      { preset: "default", label: "By single day" },
      { preset: "range", label: "By days range" },
      { preset: "weeks", label: "By weeks" },
      { preset: "months", label: "By months" },
      { preset: "years", label: "By years" },
  ],
};
</script>

<template>
  <DateSlider variant="years"
    ><DateSliderTrigger /><DateSliderContent
  /></DateSlider>
</template>

Custom Trigger

<script setup lang="ts">
import { ref } from "vue";
import { today } from "@internationalized/date";
import { getLocalTimeZone } from "@internationalized/date";
import type { Ref } from "vue";
import type { DateValue } from "@internationalized/date";
import { useDateFormatter } from "radix-vue";
import { toDate } from "radix-vue/date";
import { DateSlider } from "@/components/ui/date-slider";
import { DateSliderTrigger } from "@/components/ui/date-slider";
import { Button } from "@/components/ui/button";
import { DateSliderContent } from "@/components/ui/date-slider";

function dateLabel(value: unknown): string {
  if (value && typeof value === "object" && "start" in value && "end" in value)
    return String(value.start) + " – " + String(value.end);
  return value == null ? "Select a date" : String(value);
}

const formatter = useDateFormatter("en-US");

const args = {
  "presets": true,
  "triggerText": "Pick a date",
  "dialogTitle": "",
  "dialogButtonText": "",
  "presetsValues": [
      { preset: "default", label: "By single day" },
      { preset: "range", label: "By days range" },
      { preset: "weeks", label: "By weeks" },
      { preset: "months", label: "By months" },
      { preset: "years", label: "By years" },
  ],
};
const value = ref(today(getLocalTimeZone())) as Ref<DateValue>;
</script>

<template>
  <DateSlider>
    <DateSliderTrigger v-bind="args">
      <Button variant="tertiary" size="sm" icon="Calendar" />
    </DateSliderTrigger>
    <DateSliderContent v-slot="{ date }">{{
      dateLabel(date)
    }}</DateSliderContent>
  </DateSlider>
</template>

API reference

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

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`defaultEndDate`	`Date`	`—`
`defaultMonth`	`number`	`—`
`defaultStartDate`	`Date`	`—`
`defaultValue`	`Date \| { start?: Date; end?: Date }`	`—`
`defaultYear`	`number`	`—`
`modelValue`	`Date \| { start?: Date; end?: Date }`	`—`

DateSliderContent

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

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