funkwhale/front/ui-docs/components/ui/slider.md

import Slider from "~/components/ui/Slider.vue";

Slider

Let a user select a value along a gradient.

The model (required) is the current value.

const options = {
  me: "Only I can find and edit this",
  pod: "Me and other users on the instance can find and edit this",
  everyone: "Everyone can find and edit this",
} as const;

const option = ref<keyof typeof options>("me");

<Slider :options="options" v-model="option" label="Privacy" />

Functionality:

• Define a list of [value:string, description:markdown] pairs (props)
• Select one value as active (model)

User interaction:

• It mimics the functionality of a single range input:
  • to be operated with arrow keys or mouse
  • focus is indicated
  • ticks are indicated

Design:

• A pin (same as in the toggle component)

• a range (very faint)

• Ticks

• Not to be confused with a pearls navigation patterns (list of dots; indicates temporal range)